@campxdev/react-blueprint 2.3.4 → 2.3.6

package/dist/esm/types/src/components/Assets/Icons/Icons.d.ts

@@ -1,9 +1,10 @@
 import { FC, MouseEvent } from 'react';
 export interface IconProps {
-    color?: string;
     size?: number;
-    hoverColor?: string;
+    color?: string;
     disabled?: boolean;
+    hoverColor?: string;
+    backgroundColor?: string;
     onClick?: (event: MouseEvent<Element>) => void;
 }
 export type IconComponent = FC<IconProps>;

package/dist/esm/types/src/components/DataDisplay/ReactJoyride/ReactJoyride.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import './CustomJoyRideStyles.css';
+interface JoyrideStep {
+    target: string;
+    content: string | ReactNode;
+    title?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+    disableBeacon?: boolean;
+    hideCloseButton?: boolean;
+    showProgress?: boolean;
+    showSkipButton?: boolean;
+    spotlightClicks?: boolean;
+    styles?: Record<string, any>;
+}
+export declare const ReactJoyRide: ({ steps, children, tourName, }: {
+    steps: JoyrideStep[];
+    children?: ReactNode;
+    tourName: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/DataDisplay/export.d.ts

@@ -7,6 +7,7 @@ export * from './Chips/Chips';
 export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
+export * from './ReactJoyride/ReactJoyride';
 export * from './SidePanel/SidePanel';
 export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';

package/dist/index.d.ts

@@ -72,10 +72,11 @@ declare const UnAuthorized: ({ component }: {
 }) => react_jsx_runtime.JSX.Element;
 
 interface IconProps {
-    color?: string;
     size?: number;
-    hoverColor?: string;
+    color?: string;
     disabled?: boolean;
+    hoverColor?: string;
+    backgroundColor?: string;
     onClick?: (event: MouseEvent$1<Element>) => void;
 }
 type IconComponent = FC<IconProps>;
@@ -598,6 +599,24 @@ declare const EmptyIllustration: ({ message, imageSize, messageProps, containerP
     containerProps?: SxProps;
 }) => react_jsx_runtime.JSX.Element;
 
+interface JoyrideStep {
+    target: string;
+    content: string | ReactNode;
+    title?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+    disableBeacon?: boolean;
+    hideCloseButton?: boolean;
+    showProgress?: boolean;
+    showSkipButton?: boolean;
+    spotlightClicks?: boolean;
+    styles?: Record<string, any>;
+}
+declare const ReactJoyRide: ({ steps, children, tourName, }: {
+    steps: JoyrideStep[];
+    children?: ReactNode;
+    tourName: string;
+}) => react_jsx_runtime.JSX.Element;
+
 interface SidePanelProps {
     variables?: {
         label: string;
@@ -1575,5 +1594,5 @@ declare const splitBreadcrumbIdSlug: (param: string) => {
 declare const isLocal: boolean;
 declare const isDevelopment: boolean;
 
-export { Accordion, AccordionGroup, ActivityLogView, Alert, AnimatedGIFs, AppHeader, AppHeaderV2, AppLayout, BarChart, Breadcrumbs, Button, Calendar, Card, CellContainer, CenterBox, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, DensitySelector, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EditableDataTable, EditableTableCore, EmptyIllustration, FileUpload, FloatingContent, FloatingHelpDocs, FooterContainerContainer, FormActions, FormControlWrapper, FormWrapper, HelpPopup, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MuiThemeProvider, MultiCheckBox, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, ProgressCard, RadioGroup, ResourceNotFound, SearchBar, Select, SidePanel, SidePanelVariables, Sidebar, SingleCheckBox, SingleSelect, Snackbar, Spinner, SquareAvatar, StatusCard, Stepper, StyledContainer, Svgs, Switch, SwitchInstitutionPopup, TableColumnsSelector, TableColumnsSelectorMenuFooter, TabsContainer, TabsLayout, TextField, TimePicker, Timeline, ToolTipContent, Tooltip, Tutorial, Typography, UnAuthorized, UploadDialog, UserProfilePopup, calculateEventStats, createBreadcrumbIdSlug, darkTheme, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, lightTheme, reactBlueprintReducers, splitBreadcrumbIdSlug, usePageHeader, useParams, useUrlParams, validateEvent };
+export { Accordion, AccordionGroup, ActivityLogView, Alert, AnimatedGIFs, AppHeader, AppHeaderV2, AppLayout, BarChart, Breadcrumbs, Button, Calendar, Card, CellContainer, CenterBox, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, DensitySelector, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EditableDataTable, EditableTableCore, EmptyIllustration, FileUpload, FloatingContent, FloatingHelpDocs, FooterContainerContainer, FormActions, FormControlWrapper, FormWrapper, HelpPopup, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MuiThemeProvider, MultiCheckBox, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, ProgressCard, RadioGroup, ReactJoyRide, ResourceNotFound, SearchBar, Select, SidePanel, SidePanelVariables, Sidebar, SingleCheckBox, SingleSelect, Snackbar, Spinner, SquareAvatar, StatusCard, Stepper, StyledContainer, Svgs, Switch, SwitchInstitutionPopup, TableColumnsSelector, TableColumnsSelectorMenuFooter, TabsContainer, TabsLayout, TextField, TimePicker, Timeline, ToolTipContent, Tooltip, Tutorial, Typography, UnAuthorized, UploadDialog, UserProfilePopup, calculateEventStats, createBreadcrumbIdSlug, darkTheme, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, lightTheme, reactBlueprintReducers, splitBreadcrumbIdSlug, usePageHeader, useParams, useUrlParams, validateEvent };
 export type { AccordionProps, Activity, ActivityAction, AlertProps, AppHeaderProps, AppHeaderV2Props, AppLayoutProps, BarChartProps, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, CheckboxProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DensitySelectorProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EditableDataTableProps, EventStats, FileUploadProps, FloatingContainerProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, IconComponent, IconProps, IconsType, LineChartProps, MultiCheckboxProps, OtpInputProps, PageContentProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, ProgressCardProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SideMenuItemProps, SidePanelProps, SingleSelectProps, SnackbarProps, SquareAvatarProps, StatusCardProps, SubMenuItemProps, SwitchProps, TableColumnsSelectorProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipContentProps, TooltipProps, TypographyProps, UploadDialogProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Assets/Icons/Icons.tsx

@@ -1,8 +1,8 @@
 import { AcademicFeesIcon } from './IconComponents/AcademicFeesIcon';
 import { AcademicsIcon } from './IconComponents/AcademicIcon';
-import { ActivitiesIcon } from './IconComponents/ActivitiesIcon';
 import { AccordionArrow } from './IconComponents/AccordionArrow';
 import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
+import { ActivitiesIcon } from './IconComponents/ActivitiesIcon';
 import { ActivitylogsIcon } from './IconComponents/ActivityLogsIcon';
 import { AddSquare } from './IconComponents/AddSquare';
 import { AdminIcon } from './IconComponents/AdminIcon';
@@ -176,10 +176,11 @@ import { FC, MouseEvent } from 'react';
 import { ChallansIcon } from './IconComponents/ChallansIcon';
 
 export interface IconProps {
-  color?: string;
   size?: number;
-  hoverColor?: string;
+  color?: string;
   disabled?: boolean;
+  hoverColor?: string;
+  backgroundColor?: string;
   onClick?: (event: MouseEvent<Element>) => void;
 }
 

package/src/components/DataDisplay/ReactJoyride/CustomJoyRideStyles.css

@@ -0,0 +1,84 @@
+/* Modern ReactJoyride Styles */
+.react-joyride__tooltip {
+  background-color: #ffffff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  border: 1px solid #f3f4f6 !important;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  padding-top: 16px !important;
+}
+
+.react-joyride__tooltip div {
+  text-align: left !important;
+}
+
+
+.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
+  padding: 0 !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #4b5563 !important;
+}
+
+/* Adjust skip button positioning */
+.react-joyride__tooltip button[data-action="skip"] {
+  top: 16px !important;
+  right: 16px !important;
+}
+
+/* Beacon styling */
+.react-joyride__beacon {
+  background-color: #3b82f6 !important;
+  border: 3px solid #3b82f6 !important;
+  border-radius: 50% !important;
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
+}
+
+.react-joyride__beacon::before {
+  background-color: #3b82f6 !important;
+  animation: joyride-beacon-pulse 1.5s ease-in-out infinite !important;
+}
+
+/* Button hover effects */
+.react-joyride__tooltip button[data-action="next"]:hover {
+  background-color: #000000 !important;
+  transform: translateY(-1px) !important;
+}
+
+.react-joyride__tooltip button[data-action="back"]:hover {
+  background-color: #f9fafb !important;
+  border-color: #d1d5db !important;
+}
+
+.react-joyride__tooltip button[data-action="skip"]:hover {
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+}
+
+/* Progress indicator */
+.react-joyride__tooltip .react-joyride__tooltip-footer {
+  margin-top: 16px !important;
+  padding-top: 16px !important;
+  border-top: 1px solid #f3f4f6 !important;
+}
+
+/* Arrow styling */
+.react-joyride__tooltip-arrow {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
+}
+
+/* Custom keyframe for beacon pulse */
+@keyframes joyride-beacon-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/components/DataDisplay/ReactJoyride/ReactJoyride.tsx

@@ -0,0 +1,264 @@
+import { Box, Button, Typography } from '@mui/material';
+import { ReactNode, useState } from 'react';
+import Joyride, { CallBackProps } from 'react-joyride';
+import './CustomJoyRideStyles.css';
+
+interface JoyrideStep {
+  target: string;
+  content: string | ReactNode;
+  title?: string;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+  disableBeacon?: boolean;
+  hideCloseButton?: boolean;
+  showProgress?: boolean;
+  showSkipButton?: boolean;
+  spotlightClicks?: boolean;
+  styles?: Record<string, any>;
+}
+
+export const ReactJoyRide = ({
+  steps,
+  children,
+  tourName,
+}: {
+  steps: JoyrideStep[];
+  children?: ReactNode;
+  tourName: string;
+}) => {
+  const [run, setRun] = useState(false);
+  const [stepIndex, setStepIndex] = useState(0);
+
+  const handleJoyRideCallback = (data: CallBackProps) => {
+    const { action, status, index } = data;
+
+    if (action === 'next' || action === 'prev') {
+      setStepIndex(index + (action === 'next' ? 1 : 0));
+    }
+
+    if (action === 'reset') {
+      setRun(false);
+      setStepIndex(0);
+    }
+  };
+
+  const customSteps = steps.map((step, index) => {
+    const customStep = {
+      ...step,
+      title: '', // Remove the automatic title
+      content: (
+        <Box
+          sx={{
+            fontFamily: 'Roboto, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#6b7280',
+              fontWeight: 500,
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              fontSize: '11px',
+            }}
+          >
+            Step {index + 1}
+          </Typography>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography
+              sx={{
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Poppins, sans-serif',
+                fontSize: '16px',
+                fontWeight: '600',
+                marginTop: '12px',
+              }}
+            >
+              {step.title}
+            </Typography>
+          </Box>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography
+              sx={{
+                fontSize: '14px',
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Heebo, sans-serif',
+                fontWeight: '500',
+              }}
+            >
+              {step.content}
+            </Typography>
+          </Box>
+        </Box>
+      ),
+    };
+    return customStep;
+  });
+
+  return (
+    <>
+      <Box>
+        {/* @ts-ignore */}
+        <Joyride
+          callback={handleJoyRideCallback}
+          run={run}
+          steps={customSteps as any[]}
+          styles={
+            {
+              options: {
+                primaryColor: '#121212',
+                textColor: '#1f2937',
+                backgroundColor: '#ffffff',
+                overlayColor: 'rgba(0, 0, 0, 0.4)',
+                arrowColor: '#ffffff',
+                zIndex: 1000,
+              },
+              tooltip: {
+                borderRadius: '12px',
+                boxShadow:
+                  '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                fontSize: '14px',
+                padding: '20px',
+                minWidth: '320px',
+                maxWidth: '400px',
+              },
+              tooltipContainer: {
+                textAlign: 'left' as const,
+              },
+              tooltipTitle: {
+                fontSize: '16px',
+                fontWeight: '600',
+                color: '#1f2937',
+                fontFamily: 'Poppins, sans-serif',
+              },
+              tooltipContent: {
+                fontSize: '14px',
+                lineHeight: '1.5',
+                color: '#4b5563',
+                padding: '0',
+                fontFamily: 'Heebo, sans-serif !important',
+                fontWeight: '400',
+              },
+              buttonNext: {
+                backgroundColor: '#121212',
+                color: 'white',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                height: '40px',
+                minWidth: '80px',
+                padding: '0 16px',
+                border: 'none',
+                cursor: 'pointer' as const,
+                transition: 'all 0.2s ease',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonBack: {
+                backgroundColor: 'transparent',
+                color: '#121212',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                height: '40px',
+                minWidth: '80px',
+                padding: '0 16px',
+                border: '1.5px solid #e5e7eb',
+                cursor: 'pointer' as const,
+                transition: 'all 0.2s ease',
+                marginRight: '8px',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonSkip: {
+                backgroundColor: 'transparent',
+                color: '#6b7280',
+                fontSize: '13px',
+                fontWeight: '500',
+                border: 'none',
+                cursor: 'pointer' as const,
+                position: 'absolute' as const,
+                top: '16px',
+                right: '16px',
+                padding: '4px 8px',
+                borderRadius: '6px',
+                transition: 'all 0.2s ease',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonClose: {
+                display: 'none' as const,
+              },
+              beacon: {
+                backgroundColor: '#3b82f6',
+                borderRadius: '50%',
+                border: '3px solid #3b82f6',
+                boxShadow: '0 0 0 6px rgba(59, 130, 246, 0.2)',
+              },
+              beaconInner: {
+                backgroundColor: '#3b82f6',
+                borderRadius: '50%',
+              },
+            } as any
+          }
+          continuous
+          showSkipButton
+          showProgress
+          scrollToFirstStep
+          disableOverlay={false}
+          disableOverlayClose
+          disableScrolling={false}
+          hideCloseButton
+          locale={{
+            last: 'Finish',
+            next: 'Next',
+            skip: 'Skip',
+            back: 'Previous',
+          }}
+        />
+
+        {children}
+
+        <Button
+          onClick={() => setRun(true)}
+          variant="contained"
+          sx={{
+            position: 'fixed',
+            top: '50%',
+            right: '0px',
+            transform: 'translateY(-50%)',
+            zIndex: 1000,
+            borderRadius: '8px 0 0 8px',
+            backgroundColor: '#E0E0E7',
+            color: '#4b5261ff',
+            fontSize: '14px',
+            fontWeight: 500,
+            padding: '60px 4px',
+            minWidth: 'auto',
+            textTransform: 'none',
+            border: '1px solid #D0D0E3',
+            borderRight: 'none',
+            fontFamily: 'Roboto, sans-serif',
+            letterSpacing: '0.025em',
+            writingMode: 'vertical-rl',
+            textOrientation: 'mixed',
+            whiteSpace: 'nowrap',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 2)',
+            '&:hover': {
+              backgroundColor: '#1E027F',
+              color: 'white',
+              boxShadow:
+                '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+              transform: 'translateY(-50%) translateX(-4px)',
+            },
+            '&:active': {
+              transform: 'translateY(-50%) translateX(0px)',
+            },
+          }}
+        >
+          Take a Tour
+        </Button>
+      </Box>
+    </>
+  );
+};

package/src/components/DataDisplay/export.ts

@@ -7,6 +7,7 @@ export * from './Chips/Chips';
 export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
+export * from './ReactJoyride/ReactJoyride';
 export * from './SidePanel/SidePanel';
 export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -76,4 +76,7 @@ const MainContent = styled(Box)(({ theme }: { theme?: any }) => ({
   '&::-webkit-scrollbar': {
     display: 'none', // Safari and Chrome
   },
+  [theme.breakpoints.down('md')]: {
+    padding: '0 8px',
+  },
 }));

package/src/components/Layout/AppLayout/components/AppBar.tsx

@@ -26,9 +26,9 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
   flexShrink: 0, // Prevent AppBar from shrinking
 
   [theme.breakpoints.down('md')]: {
-    height: '56px',
-    minHeight: '56px',
-    padding: '0 16px',
+    height: '54px',
+    minHeight: '54px',
+    padding: '0 16px 0px 0px',
   },
 
   // Ensure proper spacing for child elements
@@ -75,6 +75,9 @@ export const AppBar: React.FC<AppBarProps> = ({
             padding: '24px',
             backgroundColor: theme.palette.secondary.light,
             borderRadius: '0px',
+            [theme.breakpoints.down('md')]: {
+              padding: '20px',
+            },
           }}
         >
           <HamburgerMenuIcon />