beem-component 2.0.27 → 2.1.0

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

@@ -0,0 +1,154 @@
+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 CustomRadio = styled.span`
+  display: inline-block;
+  width: 0.2143rem;
+  height: 0.2143rem;
+  border-radius: 714.2143rem;
+  transition: all 0.1s ease-in-out;
+  flex-shrink: 0;
+
+  ${({ selected, themeColor }) =>
+    selected
+      ? `
+    border: .1429rem solid ${themeColor || '#33B1BA'};
+    background-color: ${themeColor || '#33B1BA'};
+  `
+      : `
+    border: .1429rem solid transparent;
+    background-color: transparent;
+  `}
+
+  @media (max-width: 42.8571rem) {
+    width: 0.0714rem;
+    height: 0.0714rem;
+  }
+`;
+
+const RadioGroupWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  @media (max-width: 42.8571rem) {
+    gap: 0.5rem;
+  }
+`;
+
+const TimeSlotCard = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border: 0.0714rem solid
+    ${({ selected, themeColor }) => (selected ? themeColor : `${themeColor}1A`)};
+  background-color: ${({ selected, themeColor }) =>
+    selected ? hexToRgba(themeColor, 0.08) : 'transparent'};
+  padding: 1rem 1rem;
+  border-radius: 0.5rem;
+  transition: border-color 0.2s ease;
+  cursor: pointer;
+
+  &:hover {
+    border-color: ${({ themeColor }) => themeColor};
+  }
+
+  @media (max-width: 42.8571rem) {
+    padding: 0.75rem 0.75rem;
+    gap: 0.5rem;
+  }
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+
+  svg {
+    font-size: 1.1rem;
+    margin-right: 0.4rem;
+    color: ${({ themeColor }) => themeColor || '#33B1BA'};
+
+    @media (max-width: 42.8571rem) {
+      font-size: 1rem;
+    }
+  }
+`;
+
+const TimeText = styled.span`
+  color: ${({ textColor }) => textColor || '#000'};
+  ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight};`}
+
+  @media (max-width: 42.8571rem) {
+    font-size: 0.85rem;
+  }
+`;
+
+const HiddenInput = styled.input.attrs({ type: 'radio' })`
+  display: none;
+`;
+
+const BmSelector = ({
+  data = [],
+  selectedDataId,
+  onChange,
+  icon: Icon,
+  themeColor,
+  textColor,
+  fontWeight,
+  name = 'selection',
+}) => {
+  return (
+    <RadioGroupWrapper>
+      {data.map((item) => {
+        const isSelected = selectedDataId === item.id;
+
+        return (
+          <label key={item.id} htmlFor={item.id}>
+            <HiddenInput
+              id={item.id}
+              name={name}
+              value={item.id}
+              checked={isSelected}
+              onChange={() => onChange(item.id)}
+            />
+            <TimeSlotCard selected={isSelected} themeColor={themeColor}>
+              <CustomRadio selected={isSelected} themeColor={themeColor} />
+              <Label htmlFor={item.id} themeColor={themeColor}>
+                <Icon />
+                <TimeText fontWeight={fontWeight} textColor={textColor}>
+                  {item.label}
+                </TimeText>
+              </Label>
+            </TimeSlotCard>
+          </label>
+        );
+      })}
+    </RadioGroupWrapper>
+  );
+};
+
+export default BmSelector;

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

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import EventIcon from '@mui/icons-material/Event';
+import BmSelector from './BmSelector';
+
+const icons = {
+  AccessTimeIcon,
+  EventIcon,
+};
+export default {
+  title: 'Components/BmSelector',
+  component: BmSelector,
+  argTypes: {
+    icon: {
+      name: 'Icon',
+      control: { type: 'select' },
+      options: Object.keys(icons),
+      defaultValue: 'AccessTimeIcon',
+    },
+    themeColor: {
+      control: 'color',
+      defaultValue: '#33B1BA',
+    },
+    textColor: {
+      control: 'color',
+      defaultValue: '#33B1BA',
+    },
+    fontWeight: {
+      control: 'text',
+      defaultValue: '',
+    },
+    data: {
+      control: 'object',
+      defaultValue: [
+        {
+          id: 'slot-1',
+          label: '08:00 AM - 08:30 AM',
+          value: { startDate: '08:00 AM', endDate: '08:30 AM' },
+        },
+        {
+          id: 'slot-2',
+          label: '09:00 AM - 09:30 AM',
+          value: { startDate: '09:00 AM', endDate: '09:30 AM' },
+        },
+      ],
+    },
+  },
+};
+
+const baseSlots = [
+  {
+    id: 'slot-1', // ⚠️ id is mandatory for tracking selection
+    label: '10:00 AM - 10:30 AM',
+    value: { startDate: '10:00 AM', endDate: '10:30 AM' },
+  },
+  {
+    id: 'slot-2',
+    label: '10:30 AM - 11:10 AM',
+    value: { startDate: '10:30 AM', endDate: '11:10 AM' },
+  },
+];
+
+export const Default = (args) => {
+  const [selectedDataId, setSelectedDataId] = useState(
+    args.data?.[0]?.id ?? ''
+  );
+
+  return (
+    <BmSelector
+      {...args}
+      data={baseSlots}
+      selectedDataId={selectedDataId}
+      onChange={setSelectedDataId}
+      icon={icons[args.iconKey] || AccessTimeIcon}
+    />
+  );
+};
+
+Default.args = {
+  data: [
+    {
+      id: 'slot-1',
+      label: '08:00 AM - 08:30 AM',
+      value: { startDate: '08:00 AM', endDate: '08:30 AM' },
+    },
+    {
+      id: 'slot-2',
+      label: '09:00 AM - 09:30 AM',
+      value: { startDate: '09:00 AM', endDate: '09:30 AM' },
+    },
+  ],
+
+  themeColor: '#33B1BA',
+  textColor: '#33B1BA',
+  fontWeight: '',
+  icon: 'AccessTimeIcon',
+};
+
+export const Example = () => {
+  const slots = [
+    {
+      id: 'slot-1', // ⚠️ id is required
+      label: '10:00 AM - 10:30 AM',
+      value: { startDate: '10:00 AM', endDate: '10:30 AM' },
+    },
+    {
+      id: 'slot-2',
+      label: '10:30 AM - 11:10 AM',
+      value: { startDate: '10:30 AM', endDate: '11:10 AM' },
+    },
+  ];
+
+  const [selectedDataId, setSelectedDataId] = useState(null);
+  return (
+    <BmSelector
+      data={slots}
+      selectedDataId={selectedDataId}
+      onChange={setSelectedDataId}
+      icon={AccessTimeIcon}
+      themeColor="#33B1BA"
+      textColor="#33B1BA"
+      fontWeight="600"
+    />
+  );
+};

package/src/lib/components/Buttons/buttons.js

@@ -80,15 +80,17 @@ const BeemButton = styled.button`
   }};
 
   border: 0.994px solid
-    ${({ variant, disabled, color }) => {
+    ${({ variant, disabled, color, borderColor }) => {
       if (!disabled) {
-        if (variant === 'primary') return `${color || BmPrimaryBlue}`;
-        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'primary')
+          return `${borderColor || color || BmPrimaryBlue}`;
+        if (variant === 'secondary')
+          return `${borderColor || color || BmPrimaryBlue}`;
         if (variant === 'tertiary') return 'transparent';
         if (variant === 'destructive') return `${BmSecondaryRed}`;
         if (variant === 'success') return `${BmSecondaryDarkGreen}`;
         if (variant === 'neutral') return `${BmGrey400}`;
-        return `${color || BmPrimaryBlue}`;
+        return `${borderColor || color || BmPrimaryBlue}`;
       }
       if (variant === 'primary') return `${BmGrey100}`;
       if (variant === 'secondary') return `${BmGrey400}`;
@@ -109,10 +111,10 @@ const BeemButton = styled.button`
       }
     }};
     border: 0.994px solid
-      ${({ variant, disabled, color }) => {
+      ${({ variant, disabled, color, borderColor }) => {
         if (!disabled) {
           if (variant === 'secondary')
-            return `${darken(0.1, color || BmPrimaryBlue)}`;
+            return `${darken(0.1, borderColor || color || BmPrimaryBlue)}`;
         }
         return 'none';
       }};
@@ -144,10 +146,10 @@ const BeemButton = styled.button`
       }
     }};
     border: 0.071rem solid
-      ${({ variant, disabled, color }) => {
+      ${({ variant, disabled, color, borderColor }) => {
         if (!disabled) {
           if (variant === 'secondary')
-            return `${darken(0.1, color || BmPrimaryBlue)}`;
+            return `${darken(0.1, borderColor || color || BmPrimaryBlue)}`;
         }
         return 'none';
       }};
@@ -187,6 +189,7 @@ export const BmButton = (props) => {
     leadingIcon,
     trailingIcon,
     color,
+    borderColor,
     type,
     ...rest
   } = props;
@@ -196,6 +199,7 @@ export const BmButton = (props) => {
       variant={variant}
       disabled={disabled}
       color={color}
+      borderColor={borderColor}
       type={type}
       {...rest}
     >

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

@@ -0,0 +1,127 @@
+/* eslint-disable func-style */
+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 StyledCard = styled.div`
+  background-color: var(--card, #fff);
+  color: var(--card-foreground, #000);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  border-radius: 0.75rem;
+  border-style: solid;
+  border-color: ${({ borderColor }) => hexToRgba(borderColor || '#ccc', 0.1)};
+  border-width: ${({ borderWidth }) => borderWidth || '.0714rem'};
+  width: 100%;
+`;
+
+const Header = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  gap: 0.375rem;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+`;
+
+const Title = styled.h4`
+  line-height: 1;
+  margin: 0;
+`;
+
+const Description = styled.p`
+  color: var(--muted-foreground, #666);
+  margin: 0;
+`;
+
+const Content = styled.div`
+  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`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+  gap: 1rem;
+
+  @media (max-width: 42.8571rem) {
+    flex-direction: column;
+    align-items: stretch;
+
+    & > * {
+      width: 100%;
+    }
+  }
+`;
+
+function CardComponent({
+  className,
+  children,
+  borderColor,
+  borderWidth,
+  ...props
+}) {
+  return (
+    <StyledCard
+      className={className}
+      borderColor={borderColor}
+      borderWidth={borderWidth}
+      {...props}
+    >
+      {children}
+    </StyledCard>
+  );
+}
+
+const BmCardv2 = Object.assign(CardComponent, {
+  Header,
+  Title,
+  Description,
+  Content,
+  Footer,
+});
+
+export { BmCardv2 };

package/src/lib/components/Card_v2/Card.stories.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { BmCardv2 } from './Card';
+import { BmButton } from '../Buttons/buttons';
+
+export default {
+  title: 'Components/BmCardv2',
+  component: BmCardv2,
+  argTypes: {
+    borderColor: {
+      control: 'color',
+      defaultValue: '#33B1BA',
+    },
+    borderWidth: {
+      control: 'text',
+      defaultValue: '1px',
+    },
+  },
+};
+
+const Template = ({ borderColor, borderWidth }) => {
+  return (
+    <div>
+      <BmCardv2 borderColor={borderColor} borderWidth={borderWidth}>
+        <BmCardv2.Header>
+          <BmCardv2.Title>Appointment Summary</BmCardv2.Title>
+          <BmCardv2.Description>
+            This BmCardv2 shows a quick overview of your booking.
+          </BmCardv2.Description>
+        </BmCardv2.Header>
+
+        <BmCardv2.Content>
+          <p>
+            <strong>Type:</strong> Consultation
+          </p>
+          <p>
+            <strong>Date:</strong> June 24, 2025
+          </p>
+          <p>
+            <strong>Doctor:</strong> Dr. Smith
+          </p>
+        </BmCardv2.Content>
+
+        <BmCardv2.Footer>
+          <BmButton variant="primary">Edit</BmButton>
+          <BmButton variant="secondary">Cancel</BmButton>
+        </BmCardv2.Footer>
+      </BmCardv2>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  borderColor: '#33B1BA',
+  borderWidth: '1px',
+};
+
+export const Example = () => {
+  return (
+    <BmCardv2 borderColor="#d62a2af" borderWidth="1.5px">
+      <BmCardv2.Header>
+        <BmCardv2.Title>Appointment Summary</BmCardv2.Title>
+        <BmCardv2.Description>
+          This BmCardv2 shows a quick overview of your booking.
+        </BmCardv2.Description>
+      </BmCardv2.Header>
+      <BmCardv2.Content>
+        <p>
+          <strong>Type:</strong> Consultation
+        </p>
+        <p>
+          <strong>Date:</strong> June 24, 2025
+        </p>
+        <p>
+          <strong>Doctor:</strong> Dr. Smith
+        </p>
+      </BmCardv2.Content>
+      <BmCardv2.Footer>
+        <BmButton width="100%" size="medium" variant="primary">
+          Edit
+        </BmButton>
+        <BmButton
+          borderColor="#000000"
+          width="100%"
+          size="medium"
+          variant="secondary"
+          color="#000000"
+        >
+          Cancel
+        </BmButton>
+      </BmCardv2.Footer>
+    </BmCardv2>
+  );
+};