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

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -1,164 +0,0 @@
-// export type TutorialStep = {
-//   target: string;
-//   content: React.ReactNode;
-//   disableBeacon?: boolean;
-//   placement?: 'top' | 'bottom' | 'left' | 'right';
-//   title?: string;
-//   // Add other properties you need from Step
-// };
-
-// export interface TutorialProps {
-//   steps: TutorialStep[]; // Use our simpler type instead
-//   children?: ReactNode;
-//   tourName: string;
-//   showProgress?: boolean;
-//   iconPosition?: 'left' | 'right';
-// }
-
-// export const Tutorial = ({
-//   steps,
-//   children,
-//   tourName,
-//   iconPosition = 'right',
-//   showProgress = true,
-// }: TutorialProps) => {
-//   const [run, setRun] = useState(false);
-//   const userTours = localStorage.getItem('userTours') || '[]';
-//   const theme = useTheme();
-
-//   const startTour = useCallback(() => {
-//     setRun(true);
-//   }, []);
-
-//   useEffect(() => {
-//     if (userTours && !userTours.includes(tourName)) {
-//       startTour();
-//     }
-//   }, [userTours, tourName, startTour]);
-
-//   const handleJoyrideCallback = (data: CallBackProps) => {
-//     const { action, lifecycle, type } = data;
-//     const reqData = {
-//       tourName: tourName,
-//       skipped: false,
-//       completed: false,
-//     };
-
-//     // Check if the tour is skipped or completed
-//     if (
-//       action === ACTIONS.SKIP &&
-//       lifecycle === 'complete' &&
-//       type === 'tour:end'
-//     ) {
-//       console.log('Tour is skipped');
-//       reqData.skipped = true;
-//     } else if (action === ACTIONS.CLOSE) {
-//       setRun(false);
-//     } else if (action === ACTIONS.RESET) {
-//       console.log('Tour is reset');
-//       reqData.completed = true;
-//     }
-//     console.log(reqData);
-//     if (reqData.skipped || reqData.completed) {
-//       setRun(false); // Stop the tour
-//       completeTour(reqData).catch((err) => {
-//         console.error('Failed to mark tour as complete:', err);
-//       });
-//     }
-//   };
-
-//   const completeTour = async (reqData: any) => {
-//     try {
-//       if (!userTours.includes(tourName)) {
-//         localStorage.setItem(
-//           'userTours',
-//           JSON.stringify([...JSON.parse(userTours), tourName]),
-//         );
-//       }
-//       await axios.post('/square/tours/complete', { ...reqData });
-//     } catch (error) {
-//       console.error('Error completing the tour:', error);
-//     }
-//   };
-
-//   return (
-//     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-//       <Box
-//         sx={{
-//           background: theme.palette.surface.grey,
-//           padding: '20px 8px',
-//           borderRadius: '12px 0px 0px 12px',
-//           cursor: 'pointer',
-//           width: '40px',
-//           textAlign: 'center',
-//         }}
-//         onClick={startTour}
-//       >
-//         <Box sx={{ transform: 'rotate(-90deg)', marginTop: '10px' }}>
-//           <Typography variant="subtitle2">Tour</Typography>
-//         </Box>
-//       </Box>
-
-//       <ReactJoyride
-//         callback={handleJoyrideCallback}
-//         steps={steps.map((step) => ({
-//           target: step.target,
-//           content: step.content,
-//           disableBeacon: step.disableBeacon,
-//           placement: step.placement,
-//           title: step.title,
-//         }))}
-//         continuous
-//         run={run}
-//         showSkipButton
-//         showProgress={showProgress}
-//         disableCloseOnEsc
-//         disableOverlayClose
-//         spotlightPadding={5}
-//         locale={{
-//           last: 'Got it',
-//           next: 'Next',
-//           skip: 'Skip',
-//           back: 'Previous',
-//         }}
-//         styles={{
-//           buttonNext: {
-//             backgroundColor: theme.palette.primary.main,
-//             color: theme.palette.secondary.light,
-//             border: 'none',
-//             height: '28px',
-//             width: '100px',
-//             padding: '0px',
-//             fontFamily: 'Heebo, sans-serif',
-//           },
-//           buttonBack: {
-//             backgroundColor: 'transparent',
-//             color: 'black',
-//             borderRadius: '4px',
-//             height: '28px',
-//             width: '100px',
-//             gap: '10px',
-//             marginLeft: '5px',
-//             padding: '0px',
-//             border: '1px solid black',
-//             fontFamily: 'Heebo, sans-serif',
-//           },
-//           tooltip: {
-//             padding: '10px',
-//           },
-//           tooltipContainer: {
-//             display: 'flex',
-//             backgroundColor: theme.palette.surface.paperBackground,
-//           },
-
-//           options: {},
-//         }}
-//       />
-//       {children}
-//     </div>
-//   );
-// };
-
-export const Tutorial = () => {
-  return <></>;
-};

package/src/components/Input/HelpButton/HelpButton.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import HelpButton from './HelpButton';
-
-export default {
-  title: 'Input/HelpButton',
-  component: HelpButton,
-  tags: ['autodocs'],
-  argTypes: {
-    href: {
-      control: 'text',
-      description: 'The URL the button links to',
-      defaultValue: 'https://example.com/help',
-    },
-  },
-} as Meta<typeof HelpButton>;
-
-export const Default = (args: any) => <HelpButton {...args} />;
-Default.args = {
-  href: 'https://example.com/help',
-};

package/src/components/Input/Select/styles.tsx

@@ -1,29 +0,0 @@
-import { FormControl, Select, SelectProps } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const StyledFormControl = styled(FormControl)<{
-  bgcolor?: string;
-  textColor?: string;
-}>(({ theme, bgcolor, textColor }) => ({
-  margin: '8px',
-  minWidth: 220,
-  height: 40,
-  borderRadius: '8px',
-  backgroundColor: bgcolor || theme.palette.surface.grey,
-  color: textColor || theme.palette.text.secondary,
-  padding: 0,
-  '& .MuiInputBase-root': {
-    color: textColor,
-  },
-}));
-
-export const StyledSelect = styled(Select)<SelectProps>(() => ({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-  '&:hover .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-}));

package/src/components/Input/TimePicker/TimePicker.tsx

@@ -1,53 +0,0 @@
-import { PickerValidDate } from '@mui/x-date-pickers';
-import {
-  TimePicker as MuiTimePicker,
-  TimePickerProps as MuiTimePickerProps,
-} from '@mui/x-date-pickers/TimePicker';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-type TimePickerProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = {
-  format?: 'hh:mm a' | 'HH:mm' | 'HH:mm:ss a' | 'HH:mm:ss';
-  views?: ('hours' | 'minutes' | 'seconds')[];
-  helperText?: string;
-  placeholder?: string;
-  required?: boolean;
-  containerProps?: any;
-} & MuiTimePickerProps<TEnableAccessibleFieldDOMStructure>;
-
-export const TimePicker = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
-  label,
-  name,
-  value,
-  format = 'hh:mm a',
-  views = ['hours', 'minutes'],
-  helperText,
-  placeholder = 'Select Time',
-  required = false,
-  containerProps,
-  ...rest
-}: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <MuiTimePicker
-        defaultValue={value}
-        format={format}
-        views={views}
-        slotProps={{
-          textField: { placeholder, helperText },
-        }}
-        {...rest}
-      />
-    </LabelWrapper>
-  );
-};

package/src/components/Input/styles.tsx

@@ -1,14 +0,0 @@
-import { Box, Stack, styled } from '@mui/material';
-
-export const FilterOptionContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  borderBottom: `1px solid ${theme.palette.secondary.main}`,
-  width: '100%',
-}));
-
-export const FooterContainer = styled(Stack)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  borderRadius: '4px',
-  height: '40px',
-}));

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -1,89 +0,0 @@
-import { Stack, SxProps, useMediaQuery, useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import UserBox from './AppHeaderActions/UserBox';
-import { StyledHeader } from './styles/styles';
-
-export type AppHeaderProps = {
-  actions?: ReactNode[];
-  profileActions?: ReactNode[];
-  appsMenu?: ReactNode;
-  centerContent?: ReactNode;
-  clientLogoUrl?: string;
-  clientName?: string;
-  userFullName: string;
-  designation?: string;
-  collapsed: boolean;
-  institutionsData?: any[];
-  profileSx?: any;
-  onLogoutClick?: () => void;
-  showActiveDevices?: boolean;
-  headerSx?: SxProps;
-  // New custom onClick handlers
-  onAccountClick?: () => void;
-  onActiveDevicesClick?: () => void;
-  onChangeInstitutionClick?: () => void;
-  onAvatarClick?: () => void;
-};
-
-export const AppHeader = ({
-  actions = [],
-  profileActions = [],
-  profileSx = {},
-  clientLogoUrl,
-  onLogoutClick,
-  designation = '',
-  clientName,
-  userFullName,
-  collapsed,
-  institutionsData,
-  showActiveDevices = true,
-  headerSx,
-  centerContent,
-  // Destructuring the new onClick props
-  onAccountClick,
-  onActiveDevicesClick,
-  onChangeInstitutionClick,
-  onAvatarClick,
-}: AppHeaderProps) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  return (
-    <StyledHeader
-      collapsed={collapsed}
-      className="appHeader"
-      headerSx={headerSx}
-    >
-      <Typography variant={isSmallScreen ? 'subtitle3' : 'subtitle2'}>
-        {clientName}
-      </Typography>
-
-      {/* Center Content Section */}
-      {centerContent && (
-        <Stack alignItems={'center'} justifyContent={'center'} flex={1}>
-          {centerContent}
-        </Stack>
-      )}
-
-      <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
-        {actions.map((action) => action)}
-
-        <UserBox
-          fullName={userFullName}
-          actions={profileActions}
-          institutionsData={institutionsData}
-          profileSx={profileSx}
-          designation={designation}
-          showActiveDevices={showActiveDevices}
-          onLogoutClick={onLogoutClick}
-          // Passing the new onClick props to UserBox
-          onAccountClick={onAccountClick}
-          onActiveDevicesClick={onActiveDevicesClick}
-          onChangeInstitutionClick={onChangeInstitutionClick}
-          onAvatarClick={onAvatarClick}
-        />
-      </Stack>
-    </StyledHeader>
-  );
-};

package/src/components/Layout/AppHeader/AppHeaderActions/CogWheelMenu.tsx

@@ -1,32 +0,0 @@
-import { Divider, IconButton } from '@mui/material';
-import { ReactNode } from 'react';
-import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
-import { Icons } from '../../../export';
-// import { clogWheel } from "../../../../assets/images";
-// import DropDownButton from "../../../DropDownButton/DropDownButton";
-
-const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
-  return (
-    <>
-      <div>
-        <Divider
-          orientation="vertical"
-          variant="middle"
-          flexItem
-          sx={{ height: '20px' }}
-        />
-      </div>
-
-      <DropdownMenu
-        anchor={({ open }) => (
-          <IconButton color="secondary" onClick={open}>
-            <Icons.ClogWheelIcon />
-          </IconButton>
-        )}
-        menu={menu}
-      />
-    </>
-  );
-};
-
-export default CogWheelMenu;

package/src/components/Layout/AppHeader/AppHeaderActions/SwitchInstitution.tsx

@@ -1,162 +0,0 @@
-import { Box, Stack, TextField, Typography, styled } from '@mui/material';
-import Cookies from 'js-cookie';
-import { useState } from 'react';
-import { isDevelopment } from '../../../../utils/constants';
-import Image from '../../../Image/Image';
-
-const SwitchInstitution = ({ close, institutions }: any) => {
-  const [searchText, setSearchText] = useState<string>('');
-
-  const filteredInstitutions = institutions?.filter((item: any) =>
-    item.name.toLowerCase().includes(searchText.toLowerCase()),
-  );
-
-  return (
-    <Box sx={{ padding: '24px', minWidth: '500px' }}>
-      <Stack gap={3}>
-        <Typography variant="h6" textAlign="center" fontWeight={600}>
-          Select an Institution
-        </Typography>
-
-        <TextField
-          label="Search Institution"
-          variant="outlined"
-          value={searchText}
-          size="small"
-          fullWidth
-          placeholder="Type to search institutions..."
-          onChange={(e) => setSearchText(e.target.value)}
-          sx={{
-            '& .MuiOutlinedInput-root': {
-              borderRadius: '8px',
-            },
-          }}
-        />
-      </Stack>
-
-      <StyledInstitutionContainer>
-        {filteredInstitutions && filteredInstitutions.length > 0 ? (
-          filteredInstitutions.map((item: any, index: number) => (
-            <InstitutionCard institution={item} key={index} />
-          ))
-        ) : (
-          <Box sx={{ textAlign: 'center', py: 4 }}>
-            <Typography variant="body2" color="text.secondary">
-              {institutions?.length === 0
-                ? 'No institutions available'
-                : 'No institutions found matching your search'}
-            </Typography>
-          </Box>
-        )}
-      </StyledInstitutionContainer>
-    </Box>
-  );
-};
-
-const InstitutionCard = ({ institution }: any) => {
-  const handleClick = () => {
-    if (isDevelopment) {
-      Cookies.set('campx_institution', institution?.code);
-    } else {
-    }
-
-    window.location.replace(`${window.location.origin}/${institution?.code}`);
-  };
-
-  return (
-    <StyledInstitutionCard onClick={handleClick}>
-      <Box
-        sx={{
-          width: '100%',
-          height: '100px',
-          overflow: 'hidden',
-          borderRadius: '8px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'background.paper',
-        }}
-      >
-        <Image
-          alt={`${institution?.name} logo`}
-          height="100px"
-          width="100%"
-          src={institution?.imageSquare?.url}
-        />
-      </Box>
-      <Typography
-        variant="body2"
-        textAlign="center"
-        fontWeight={500}
-        sx={{
-          lineHeight: 1.3,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          display: '-webkit-box',
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: 'vertical',
-          minHeight: '2.6em', // Ensure consistent height for 2 lines
-        }}
-      >
-        {institution?.name}
-      </Typography>
-    </StyledInstitutionCard>
-  );
-};
-
-const StyledInstitutionCard = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '12px',
-  padding: '16px',
-  border: `2px solid ${theme.palette.divider}`,
-  borderRadius: '12px',
-  cursor: 'pointer',
-  width: '160px',
-  height: '180px',
-  flexShrink: 0,
-  transition: 'all 0.2s ease-in-out',
-  backgroundColor: theme.palette.background.paper,
-
-  '&:hover': {
-    borderColor: theme.palette.primary.main,
-    boxShadow: `0 4px 12px ${theme.palette.primary.main}20`,
-    transform: 'translateY(-2px)',
-  },
-
-  '& img': {
-    borderRadius: '8px',
-    objectFit: 'contain',
-  },
-}));
-
-export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
-  marginTop: '24px',
-  display: 'flex',
-  justifyContent: 'center',
-  padding: '16px',
-  flexWrap: 'wrap',
-  gap: '16px',
-  maxHeight: '400px',
-  overflowY: 'auto',
-  borderRadius: '8px',
-  backgroundColor: theme.palette.background.default,
-
-  '&::-webkit-scrollbar': {
-    width: '6px',
-  },
-  '&::-webkit-scrollbar-track': {
-    backgroundColor: theme.palette.divider,
-    borderRadius: '3px',
-  },
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: theme.palette.text.secondary,
-    borderRadius: '3px',
-    '&:hover': {
-      backgroundColor: theme.palette.text.primary,
-    },
-  },
-}));
-
-export default SwitchInstitution;