@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -1,28 +1,34 @@
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  BreadcrumbsProps as MuiBreadcrumbsProps,
-  Stack,
-  styled,
-  SxProps,
-} from '@mui/material';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
 
-import { ReactNode } from 'react';
+import { Typography } from '@/components/export';
+import { cn } from '@/lib/utils';
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/shadcn-components/Navigation/Breadcrumb/Breadcrumb';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shadcn-components/Navigation/DropdownMenu/DropdownMenu';
 import { getBreadcrumbsCharacter } from '../../../utils/export';
-import { Typography } from '../../export';
+import { MenuToggleButton } from '../../Layout/AppLayout/components/MenuToggleButton';
 
 export type BreadcrumbsProps = {
   pathTrimCount: number;
-  containerProps?: SxProps;
-  actions?: ReactNode[];
-} & MuiBreadcrumbsProps;
+  containerClassName?: string;
+};
 
 export const Breadcrumbs = ({
   pathTrimCount,
-  containerProps,
-  actions = [],
-  ...rest
+  containerClassName,
 }: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
   const currentPathArray = window.location.pathname.split('/');
@@ -33,63 +39,87 @@ export const Breadcrumbs = ({
 
   currentPathArray.splice(0, pathTrimCount + 3);
 
-  return (
-    <BreadcrumbContainer sx={containerProps}>
-      <BreadcrumbsWrapper>
-        <MuiBreadcrumbs {...rest}>
-          {currentPathArray?.map((item, index) => {
-            basePath = basePath + `/${item}`;
-            return index === currentPathArray.length - 1 ? (
-              <Typography key={index} variant="subtitle2">
-                {_.startCase(
-                  decodeURIComponent(item).split(specialCharacter)[0],
-                )}
-              </Typography>
-            ) : (
-              <BreadcrumbLink key={index} to={basePath}>
-                {_.startCase(
-                  decodeURIComponent(item).split(specialCharacter)[0],
-                )}
-              </BreadcrumbLink>
-            );
-          })}
-        </MuiBreadcrumbs>
-      </BreadcrumbsWrapper>
-      <ActionsContainer>
-        {actions.map((action, index) => action)}
-      </ActionsContainer>
-    </BreadcrumbContainer>
-  );
-};
-
-const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  width: '100%',
-  justifyContent: 'space-between',
-  height: '52px',
-  paddingLeft: '12px',
-  backgroundColor: theme.palette.surface.paperBackground,
-  [theme.breakpoints.down('md')]: {
-    paddingLeft: '0px',
-  },
-}));
+  const breadcrumbItems = currentPathArray.map((item, index) => {
+    const itemBasePath = basePath + `/${item}`;
+    basePath = itemBasePath;
+    return {
+      label: _.startCase(decodeURIComponent(item).split(specialCharacter)[0]),
+      path: itemBasePath,
+      isLast: index === currentPathArray.length - 1,
+    };
+  });
 
-const BreadcrumbsWrapper = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-}));
+  const renderBreadcrumbs = () => {
+    if (breadcrumbItems.length <= 2) {
+      // Display all items if 2 or fewer
+      return breadcrumbItems.map((item, index) => (
+        <BreadcrumbItem key={index}>
+          {item.isLast ? (
+            <BreadcrumbPage>{item.label}</BreadcrumbPage>
+          ) : (
+            <>
+              <BreadcrumbLink asChild>
+                <Link to={item.path}>{item.label}</Link>
+              </BreadcrumbLink>
+              <BreadcrumbSeparator />
+            </>
+          )}
+        </BreadcrumbItem>
+      ));
+    } else {
+      // Show first, ellipsis with menu, and last
+      const firstItem = breadcrumbItems[0];
+      const middleItems = breadcrumbItems.slice(1, -1);
+      const lastItem = breadcrumbItems[breadcrumbItems.length - 1];
 
-const ActionsContainer = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  gap: '12px',
-}));
+      return (
+        <>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to={firstItem.path}>
+                <Typography variant={'small'} className="text-muted-foreground">
+                  {firstItem.label}
+                </Typography>
+              </Link>
+            </BreadcrumbLink>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger className="flex items-center gap-1">
+                <BreadcrumbEllipsis />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {middleItems.map((item, index) => (
+                  <DropdownMenuItem key={index} asChild>
+                    <Link to={item.path}>{item.label}</Link>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <BreadcrumbSeparator />
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbPage>
+              <Typography variant={'small'}>{lastItem.label}</Typography>
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        </>
+      );
+    }
+  };
 
-const BreadcrumbLink = styled(Link)(({ theme }) => ({
-  textDecoration: 'none',
-  transition: 'color 0.3s ease-in-out',
-  color: theme.palette.text.tertiary,
-  '&:hover': {
-    color: theme.palette.primary.light,
-  },
-}));
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-row items-center px-2 pt-2 gap-1 md:px-3',
+        containerClassName,
+      )}
+    >
+      <MenuToggleButton />
+      <Breadcrumb>
+        <BreadcrumbList>{renderBreadcrumbs()}</BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  );
+};

package/src/components/Navigation/Calendar/Calendar.css

@@ -0,0 +1,285 @@
+/* FullCalendar Base Styles */
+.calendar-wrapper .fc {
+  height: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+}
+
+/* Header Toolbar */
+.calendar-wrapper .fc-header-toolbar {
+  background-color: var(--background);
+  padding: 1rem;
+  margin: 0 !important;
+  border-bottom: 1px solid var(--border);
+}
+
+.calendar-wrapper .fc-toolbar-chunk {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.calendar-wrapper .fc-button-group {
+  display: inline-flex;
+}
+
+.calendar-wrapper .fc-button {
+  border: 1px solid var(--border);
+  background-color: transparent;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: auto;
+  padding: 0.25rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+
+.calendar-wrapper .fc-button:hover {
+  background-color: var(--muted);
+  color: var(--primary);
+  border: 1px solid var(--border);
+}
+
+.calendar-wrapper .fc-button:focus {
+  box-shadow: none !important;
+}
+
+.calendar-wrapper .fc-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.calendar-wrapper .fc-toolbar-title {
+  color: var(--foreground);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Day Headers */
+.calendar-wrapper .fc-col-header {
+  background-color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+
+.calendar-wrapper .fc-col-header-cell {
+  padding: 0.5rem;
+}
+
+.calendar-wrapper .fc-col-header-cell-cushion {
+  color: var(--muted-foreground);
+  font-weight: 600;
+  text-decoration: none;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+/* Day Cells */
+.calendar-wrapper .fc-daygrid-day {
+  background-color: var(--background);
+  border-color: var(--border);
+}
+
+.calendar-wrapper .fc-day-today {
+  background-color: color-mix(
+    in oklch,
+    var(--primary) 5%,
+    transparent
+  ) !important;
+}
+
+.calendar-wrapper .fc-daygrid-day-number {
+  color: var(--foreground);
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.calendar-wrapper .fc-daygrid-day-number:hover {
+  background-color: var(--muted);
+  border-radius: 0.25rem;
+}
+
+.calendar-wrapper .fc-daygrid-day-top {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.25rem;
+}
+
+/* Events */
+.calendar-wrapper .fc-event {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+  border-radius: 0.25rem;
+  border: none;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.calendar-wrapper .fc-event:hover {
+  background-color: color-mix(in oklch, var(--primary) 90%, transparent);
+}
+
+.calendar-wrapper .fc-event-title,
+.calendar-wrapper .fc-event-time {
+  padding: 0.125rem 0.25rem;
+}
+
+/* Time Grid */
+.calendar-wrapper .fc-timegrid-slot {
+  border-color: var(--border);
+}
+
+.calendar-wrapper .fc-timegrid-col.fc-day-today {
+  background-color: color-mix(in oklch, var(--primary) 3%, transparent);
+}
+
+.calendar-wrapper .fc-timegrid-axis {
+  color: var(--muted-foreground);
+}
+
+.calendar-wrapper .fc-timegrid-slot-label {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+/* List View */
+.calendar-wrapper .fc-list {
+  border-color: var(--border);
+}
+
+.calendar-wrapper .fc-list-day {
+  background-color: var(--muted);
+}
+
+.calendar-wrapper .fc-list-day-cushion {
+  color: var(--foreground);
+  font-weight: 600;
+}
+
+.calendar-wrapper .fc-list-event {
+  border-color: var(--border);
+  transition: all 0.2s;
+}
+
+.calendar-wrapper .fc-list-event:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+.calendar-wrapper .fc-list-event-title {
+  color: var(--foreground);
+}
+
+.calendar-wrapper .fc-list-event-time {
+  color: var(--muted-foreground);
+}
+
+/* More Link */
+.calendar-wrapper .fc-more-link {
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.calendar-wrapper .fc-more-link:hover {
+  color: color-mix(in oklch, var(--primary) 90%, transparent);
+}
+
+/* Popover */
+.calendar-wrapper .fc-popover {
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.calendar-wrapper .fc-popover-header {
+  background-color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+}
+
+.calendar-wrapper .fc-popover-title {
+  color: var(--foreground);
+  font-weight: 600;
+}
+
+.calendar-wrapper .fc-popover-close {
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+
+.calendar-wrapper .fc-popover-close:hover {
+  color: var(--foreground);
+}
+
+/* Scrollbar Styling */
+.calendar-wrapper .fc-scroller::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-track {
+  background-color: var(--muted);
+  border-radius: 3px;
+}
+
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 3px;
+}
+
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-foreground);
+}
+
+/* Borders */
+.calendar-wrapper .fc-theme-standard td,
+.calendar-wrapper .fc-theme-standard th {
+  border-color: var(--border);
+}
+
+.calendar-wrapper .fc-theme-standard .fc-scrollgrid {
+  border-color: var(--border);
+}
+
+/* Now Indicator */
+.calendar-wrapper .fc-timegrid-now-indicator-line {
+  border-color: var(--destructive);
+}
+
+.calendar-wrapper .fc-timegrid-now-indicator-arrow {
+  border-color: var(--destructive);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .calendar-wrapper .fc-header-toolbar {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .calendar-wrapper .fc-toolbar-chunk {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .calendar-wrapper .fc-button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .calendar-wrapper .fc-event {
+    font-size: 0.7rem;
+  }
+
+  .calendar-wrapper .fc-daygrid-day-number {
+    font-size: 0.75rem;
+  }
+}

package/src/components/Navigation/Calendar/Calendar.tsx

@@ -4,7 +4,8 @@ import FullCalendar from '@fullcalendar/react';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import React, { useCallback } from 'react';
 
-import { StyledCalendarContainer, StyledCalendarWrapper } from './styles';
+import { cn } from '../../../lib/utils';
+import './Calendar.css';
 import { CalendarProps } from './types';
 
 export const Calendar: React.FC<CalendarProps> = ({
@@ -177,13 +178,26 @@ export const Calendar: React.FC<CalendarProps> = ({
     id: String(event.id), // FullCalendar prefers string IDs
   }));
 
+  const heightStyle =
+    typeof height === 'string'
+      ? height
+      : typeof height === 'number'
+      ? `${height}px`
+      : 'auto';
+
   return (
-    <StyledCalendarContainer
-      height={height as any}
-      aspectRatio={aspectRatio}
-      {...containerProps}
+    <div
+      className={cn(
+        'bg-background rounded-lg overflow-hidden border border-border',
+        'calendar-container',
+      )}
+      style={{
+        height: heightStyle,
+        aspectRatio: aspectRatio || 'auto',
+      }}
+      {...(containerProps as any)}
     >
-      <StyledCalendarWrapper>
+      <div className="relative w-full calendar-wrapper">
         <FullCalendar
           plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
           // View configuration
@@ -233,9 +247,9 @@ export const Calendar: React.FC<CalendarProps> = ({
           displayEventEnd={false}
           // Selection
           unselectAuto={true}
-          unselectCancel=""
+          unselectCancel=".fc-popover"
         />
-      </StyledCalendarWrapper>
-    </StyledCalendarContainer>
+      </div>
+    </div>
   );
 };

package/src/components/Navigation/Calendar/types.ts

@@ -1,5 +1,4 @@
 import { EventApi } from '@fullcalendar/core';
-import { StackProps } from '@mui/material';
 
 export interface CalendarEvent {
   id: string | number;
@@ -95,7 +94,7 @@ export interface CalendarProps {
   // Styling & layout
   height?: string | number;
   aspectRatio?: number;
-  containerProps?: StackProps;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
 
   // Localization
   locale?: string;

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,9 +1,12 @@
-import { Box, Stack, useTheme } from '@mui/material';
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Button } from '@/shadcn-components/Input/Button/Button';
 import { AnimatedGIFs } from '../../../assets/images/gif';
-import { Button, Dialog, Typography } from '../../export';
 
 export type ConfirmDialogType = 'confirm' | 'delete';
 
+type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
 export type ConfirmDialogProps = {
   isOpen: boolean;
   title: string;
@@ -13,6 +16,7 @@ export type ConfirmDialogProps = {
   type: ConfirmDialogType;
   confirmButtonText?: string;
   cancelButtonText?: string;
+  maxWidth?: MaxWidthSize;
 };
 
 export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
@@ -24,57 +28,52 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   type,
   confirmButtonText = type === 'delete' ? 'Confirm Delete' : 'Confirm',
   cancelButtonText = 'Cancel',
+  maxWidth = 'xl',
 }) => {
-  const theme = useTheme();
-  if (!isOpen) return null;
+  const maxWidthClasses = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+  };
 
   return (
-    <Dialog
-      keepMounted
-      maxWidth="sm"
-      transitionDuration={150}
-      open={isOpen}
-      content={({ close }) => {
-        return (
-          <Box sx={{ padding: '16px' }}>
-            <Stack direction="row" alignItems="center">
-              <img
-                src={
-                  type === 'delete'
-                    ? AnimatedGIFs.DeleteConfirmationAlert
-                    : AnimatedGIFs.ConfirmationAlert
-                }
-                alt="Animated GIF"
-                style={{ width: '80px' }}
-              />
-              <Box>
-                <Typography variant="subtitle2">{title}</Typography>
-                <Typography variant="label1">{message}</Typography>
-              </Box>
-            </Stack>
-            <Stack direction="row" justifyContent="flex-end" gap={3}>
-              <Button
-                onClick={() => {
-                  onCancel();
-                  close();
-                }}
-                variant="text"
-                textColor={theme.palette.text.tertiary}
-              >
-                {cancelButtonText}
-              </Button>
-              <Button
-                onClick={onConfirm}
-                variant="contained"
-                color={type === 'delete' ? 'error' : 'primary'}
-              >
-                {confirmButtonText}
-              </Button>
-            </Stack>
-          </Box>
-        );
-      }}
-      onClose={onCancel}
-    />
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent
+        className={`w-full ${maxWidthClasses[maxWidth]} p-3 gap-2`}
+        showCloseButton={false}
+      >
+        <DialogHeader>
+          <div className="flex items-center gap-4">
+            <img
+              src={
+                type === 'delete'
+                  ? AnimatedGIFs.DeleteConfirmationAlert
+                  : AnimatedGIFs.ConfirmationAlert
+              }
+              alt="Confirmation"
+              className="w-20 shrink-0"
+            />
+            <div className="flex flex-col gap-1">
+              <Typography variant="h4">{title}</Typography>
+              <Typography variant="muted">{message}</Typography>
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogFooter className="gap-3 sm:gap-3">
+          <Button variant="ghost" onClick={onCancel}>
+            {cancelButtonText}
+          </Button>
+          <Button
+            variant={type === 'delete' ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmButtonText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };