beem-component 2.1.28 → 2.1.30

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;

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import GroupIcon from '@mui/icons-material/Group';
+import BusinessIcon from '@mui/icons-material/Business';
+import BmCustomTab from './BmTabv2';
+
+export const ExampleCustomTabsUsage = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <div style={{ padding: 20 }}>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: 20 }}>
+        <strong>Current Tab:</strong> {activeTab}
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/CustomTabs',
+  component: BmCustomTab,
+};
+
+export const ExampleTabs = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: '20px' }}>
+        <p>
+          You have selected: <strong>{activeTab}</strong>
+        </p>
+      </div>
+    </>
+  );
+};

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

@@ -1,8 +1,27 @@
 /* eslint-disable func-style */
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import styled from 'styled-components';
 
-import hexToRgba from '../../../util/convertToRGBA';
+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 {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+};
+
+const CardContext = createContext({});
 
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
@@ -35,14 +54,42 @@ const Description = styled.p`
   margin: 0;
 `;
 
-const Content = styled.div`
+const ContentWrapper = styled.div`
+  min-height: ${({ $contentHeight }) => $contentHeight || '14.2857rem'};
   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.4)};
+  }
 
   &:last-child {
     padding-bottom: 1.5rem;
   }
+
+  @media (max-width: 54.8571rem) {
+    max-height: calc(100vh - 17.8572rem);
+  }
 `;
 
+function Content({ children, style }) {
+  const { contentHeight } = useContext(CardContext);
+  return (
+    <ContentWrapper $contentHeight={contentHeight} style={style}>
+      {children}
+    </ContentWrapper>
+  );
+}
+
 const Footer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -53,7 +100,6 @@ const Footer = styled.div`
   @media (max-width: 42.8571rem) {
     flex-direction: column;
     align-items: stretch;
-
     & > * {
       width: 100%;
     }
@@ -65,17 +111,22 @@ function CardComponent({
   children,
   borderColor,
   borderWidth,
+  contentHeight,
   ...props
 }) {
+  const contextValue = { contentHeight };
+
   return (
-    <StyledCard
-      className={className}
-      borderColor={borderColor}
-      borderWidth={borderWidth}
-      {...props}
-    >
-      {children}
-    </StyledCard>
+    <CardContext.Provider value={contextValue}>
+      <StyledCard
+        className={className}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        {...props}
+      >
+        {children}
+      </StyledCard>
+    </CardContext.Provider>
   );
 }