@campxdev/campx-web-utils 0.6.0 → 1.0.0

package/src/context/ErrorBoundary/Login.tsx

@@ -1,202 +0,0 @@
-import { Button, Icons, TextField } from '@campxdev/react-blueprint';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Box, Stack } from '@mui/material';
-import DeviceDetector from 'device-detector-js';
-import Cookies from 'js-cookie';
-import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useMutation } from 'react-query';
-
-import * as Yup from 'yup';
-import { axios } from '../../config/axios';
-
-type DeviceInformation = {
-  deviceType: string;
-  clientName: string;
-  os: string;
-  osVersion: string;
-  latitude: number | null;
-  longitude: number | null;
-  tokenType: string;
-};
-
-export type DeviceState = {
-  deviceInformation: DeviceInformation;
-  isLocationAllowed: boolean;
-};
-
-type LoginDetails = {
-  username: string;
-  password: string;
-};
-
-const performLogin = async (body: any) => {
-  if (!body.latitude || !body.longitude) {
-    const response = await fetch(
-      'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          considerIp: 'true',
-        }),
-      },
-    );
-    const data = await response.json();
-    body.latitude = data.location.lat;
-    body.longitude = data.location.lng;
-  }
-  return axios.post(`/auth-server/auth/login`, body).then((res) => res.data);
-};
-
-const validationSchema = Yup.object().shape({
-  username: Yup.string().required('Username is required'),
-  password: Yup.string().required('Password is required'),
-});
-
-export const Login = ({ close }: { close: () => void }) => {
-  const [deviceState, setDeviceState] = useState<DeviceState>({
-    deviceInformation: {
-      deviceType: 'browser',
-      clientName: 'unknown',
-      os: 'unknown',
-      osVersion: 'unknown',
-      latitude: null,
-      longitude: null,
-      tokenType: 'WEB',
-    },
-    isLocationAllowed: true,
-  });
-
-  useEffect(() => {
-    navigator.geolocation.getCurrentPosition((position) => {
-      setDeviceState((s) => ({
-        ...s,
-        deviceInformation: {
-          ...s.deviceInformation,
-          latitude: position.coords.latitude,
-          longitude: position.coords.longitude,
-        },
-      }));
-    });
-    navigator.permissions
-      .query({ name: 'geolocation' })
-      .then((permissionStatus) => {
-        if (permissionStatus.state === 'denied') {
-          setDeviceState((s) => ({
-            ...s,
-            isLocationAllowed: false,
-          }));
-        }
-      });
-
-    const detector = new DeviceDetector();
-    const deviceInfo = detector.parse(navigator.userAgent);
-    setDeviceState((s) => ({
-      ...s,
-      deviceInformation: {
-        ...s.deviceInformation,
-        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
-        os: deviceInfo.os?.name || s.deviceInformation.os,
-        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
-      },
-    }));
-  }, []);
-
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<LoginDetails>({
-    resolver: yupResolver(validationSchema),
-  });
-
-  const { mutate, isLoading } = useMutation(performLogin, {
-    onSuccess(data) {
-      if (data.loginSuccessful) {
-        Cookies.remove('campx_session_key');
-        Cookies.remove('campx_tenant');
-        Cookies.remove('campx_institution');
-        Cookies.set('campx_session_key', data?.token);
-        Cookies.set('campx_tenant', data?.subDomain);
-        Cookies.set('campx_institution', data?.institutionCode);
-        close();
-        window.location.reload();
-      }
-    },
-  });
-
-  const onSubmit = async (body: LoginDetails) => {
-    mutate({ ...body, ...deviceState.deviceInformation });
-  };
-
-  return (
-    <>
-      <Stack gap="16px" justifyContent="space-between" alignItems="center">
-        <Box height="36px" width="194.8px">
-          <Icons.CampxFullLogoIcon />
-        </Box>
-        <Stack gap="10px" justifyContent="center" alignItems="center">
-          <Controller
-            control={control}
-            render={({ field }: { field: any }) => {
-              return (
-                <TextField
-                  size="medium"
-                  name="username"
-                  sx={{
-                    width: '400px',
-                  }}
-                  placeholder="Enter Username or Email"
-                  containerProps={{ my: '0' }}
-                  onChange={field.onChange}
-                  label="Username or Email"
-                  error={!!errors.username}
-                  required
-                />
-              );
-            }}
-            name="username"
-          />
-          <Controller
-            control={control}
-            render={({ field }: { field: any }) => {
-              return (
-                <TextField
-                  size="medium"
-                  name="password"
-                  sx={{
-                    width: '400px',
-                  }}
-                  placeholder="Enter password"
-                  onChange={field.onChange}
-                  containerProps={{ my: '0' }}
-                  label="Password"
-                  type="password"
-                  error={!!errors.password}
-                  required
-                />
-              );
-            }}
-            name="password"
-          />
-          <Button
-            type="submit"
-            color="primary"
-            variant="contained"
-            sx={{
-              width: '400px',
-            }}
-            onClick={handleSubmit(onSubmit)}
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            Login
-          </Button>
-        </Stack>
-      </Stack>
-    </>
-  );
-};

package/src/context/Providers.tsx

@@ -1,64 +0,0 @@
-import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import {
-  combineReducers,
-  configureStore,
-  ReducersMapObject,
-} from '@reduxjs/toolkit';
-import { ReactNode, useEffect } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { institutionCode, tenantCode } from '../utils/constants';
-import { ConfirmDialogProvider } from './ConfirmDialogProvider';
-import { SnackbarProvider } from './SnackbarProvider';
-
-export const Providers = ({
-  children,
-  basename,
-  theme = lightTheme,
-  reducers = {},
-}: {
-  children: ReactNode;
-  basename?: string;
-  theme?: any;
-  reducers?: ReducersMapObject;
-}) => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        refetchOnWindowFocus: false,
-        retry: false,
-        useErrorBoundary: true,
-      },
-    },
-  });
-
-  var baseName = tenantCode && institutionCode ? `/${institutionCode}` : '/';
-  useEffect(() => {
-    if (window.location.pathname === '/' && institutionCode && tenantCode) {
-      window.location.replace(window.location.origin + `/${institutionCode}`);
-    }
-  }, [institutionCode, tenantCode]);
-
-  const store = configureStore({
-    reducer: combineReducers(reducers),
-  });
-
-  return (
-    <Provider store={store}>
-      <BrowserRouter basename={basename ?? baseName}>
-        <QueryClientProvider client={queryClient}>
-          <MuiThemeProvider theme={theme}>
-            <SnackbarProvider>
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
-                <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
-              </LocalizationProvider>
-            </SnackbarProvider>
-          </MuiThemeProvider>
-        </QueryClientProvider>
-      </BrowserRouter>
-    </Provider>
-  );
-};

package/src/context/SnackbarProvider.tsx

@@ -1,42 +0,0 @@
-import { Severity, Snackbar } from '@campxdev/react-blueprint';
-import { createContext, ReactNode } from 'react';
-import { ApplicationStore } from './application-store';
-
-interface SnackbarContextProps {
-  showSnackbar: (message: string, severity?: Severity) => void;
-}
-
-const SnackbarContext = createContext<SnackbarContextProps | undefined>(
-  undefined,
-);
-
-interface SnackbarProviderProps {
-  children: ReactNode;
-}
-
-export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
-  const snackbar = ApplicationStore.useState((s) => s.snackbar);
-  const showSnackbar = (message: string, severity: Severity = 'info') => {
-    ApplicationStore.update((s) => {
-      s.snackbar.open = true;
-      s.snackbar.message = message;
-      s.snackbar.severity = severity;
-    });
-  };
-  return (
-    <SnackbarContext.Provider value={{ showSnackbar }}>
-      {children}
-      <Snackbar
-        open={snackbar.open}
-        message={snackbar.message}
-        severity={snackbar.severity}
-        autoHideDuration={1500}
-        onClose={() => {
-          ApplicationStore.update((s) => {
-            s.snackbar.open = false;
-          });
-        }}
-      />
-    </SnackbarContext.Provider>
-  );
-};

package/src/context/application-store.ts

@@ -1,87 +0,0 @@
-import { ConfirmDialogType, Severity } from '@campxdev/react-blueprint';
-import { Store } from 'pullstate';
-
-type Classroom = {
-  id: number;
-  batchName?: string;
-  branchCode?: string;
-  courseId: number;
-  currentSemester: number;
-  name: string;
-  programId: number;
-  regulationId?: number;
-  section?: string;
-  timetableSlotTemplateId?: number;
-};
-
-export type ApplicationStoreType = {
-  isLoginDialogOpen: boolean;
-  snackbar: {
-    open: boolean;
-    message: string;
-    severity: Severity;
-  };
-  confirmDialog: {
-    isOpen: boolean;
-    title: string;
-    message: string;
-    onConfirm: () => void;
-    onCancel: () => void;
-    type: ConfirmDialogType;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
-  };
-  user?: {
-    id: number;
-    fullName: string;
-    semNo?: number;
-    rollNo?: string;
-    courseId?: number;
-    branchCode?: string;
-    classroom?: Classroom;
-    email?: string;
-    employeeId?: string;
-    departmentIds?: string[];
-    designationId?: string;
-    institutionIds: number[];
-    isAdminUser?: boolean;
-    isSuperUser?: boolean;
-    studentId?: number;
-    admissionId?: string;
-    mStudentId?: string;
-  };
-  institution?: {
-    institutions: [];
-    loading: false;
-    error: null;
-    current: null;
-  };
-  asset?: {
-    favIcon: null;
-    institutionLogo: null;
-    institutionName: null;
-  };
-};
-
-export const initialApplicationState: ApplicationStoreType = {
-  isLoginDialogOpen: false,
-  snackbar: {
-    open: false,
-    message: '',
-    severity: 'success',
-  },
-  confirmDialog: {
-    isOpen: false,
-    title: '',
-    message: '',
-    onConfirm: () => {},
-    onCancel: () => {},
-    type: 'confirm',
-  },
-  user: undefined,
-  institution: undefined,
-  asset: undefined,
-};
-export const ApplicationStore = new Store<ApplicationStoreType>(
-  initialApplicationState,
-);

package/src/hooks/useConfirm.ts

@@ -1,57 +0,0 @@
-import { ConfirmDialogType } from '@campxdev/react-blueprint';
-import { ApplicationStore } from '../context/application-store';
-
-const defaultConfirmDialogState = {
-  isOpen: false,
-  title: '',
-  message: '',
-  confirmButtonText: '',
-  cancelButtonText: '',
-  type: 'confirm' as ConfirmDialogType,
-  onConfirm: () => {},
-  onCancel: () => {},
-};
-
-export const useConfirm = () => {
-  const isConfirmed = ({
-    title,
-    message,
-    confirmButtonText,
-    cancelButtonText,
-    type = 'confirm',
-  }: {
-    title: string;
-    message: string;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
-    type?: ConfirmDialogType;
-  }): Promise<boolean> =>
-    new Promise((resolve) => {
-      ApplicationStore.update((s) => {
-        s.confirmDialog = {
-          isOpen: true,
-          title,
-          message,
-          confirmButtonText,
-          cancelButtonText,
-          type,
-          onConfirm: () => {
-            resolve(true);
-            resetDialog();
-          },
-          onCancel: () => {
-            resolve(false);
-            resetDialog();
-          },
-        };
-      });
-    });
-
-  const resetDialog = () => {
-    ApplicationStore.update((s) => {
-      s.confirmDialog = defaultConfirmDialogState;
-    });
-  };
-
-  return isConfirmed;
-};

package/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

package/src/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement,
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/layout/AppLayout/AppLayout.tsx

@@ -1,151 +0,0 @@
-import { AppHeader, Sidebar, Spinner } from '@campxdev/react-blueprint';
-import { SideMenuItemProps } from '@campxdev/react-blueprint/src/components/Navigation/Sidebar/Sidebar';
-import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
-import { motion } from 'framer-motion';
-import Cookies from 'js-cookie';
-import { ReactNode, Suspense, useState } from 'react';
-import { ChangePasswordDialog } from '../../components/ChangePassword';
-import { axios } from '../../config/axios';
-import { ErrorBoundary } from '../../context/export';
-import HelpDocs from './components/HelpDocs';
-
-type Props = {
-  actions?: ReactNode[];
-  profileActions?: ReactNode[];
-  children?: ReactNode;
-  menu: SideMenuItemProps[];
-  mainContainerSx?: any;
-  handleLogout?: any;
-  userName?: string;
-  designation?: string;
-  clientName?: string;
-  institutionData?: any[];
-  defaultCollapsed?: boolean;
-  helpDocsConfig?: Record<
-    string,
-    { actions: { name: string; onClick: () => void }[] }
-  >;
-};
-
-export const AppLayout: React.FC<Props> = ({
-  actions = [],
-  profileActions = [],
-  children,
-  institutionData = [],
-  menu,
-  mainContainerSx,
-  handleLogout,
-  userName = '',
-  designation = '',
-  clientName = '',
-  defaultCollapsed = true,
-  helpDocsConfig,
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  function logout() {
-    axios
-      .post('/auth-server/auth/logout')
-      .then((res) => {
-        Cookies.remove('campx_tenant');
-        Cookies.remove('campx_session_key');
-        Cookies.remove('campx_institution');
-        window.location.href = '/';
-      })
-      .catch((err) => {
-        // toast("Unable To Logout.");
-      });
-  }
-
-  const fullPath = window.location.pathname;
-  const pathSegments = fullPath.split('/').filter(Boolean);
-  const actualPath = pathSegments.slice(1).join('/');
-  const normalizedPath = actualPath.replace(/\/\d+/g, '/:id');
-  const helpDocsActions = helpDocsConfig?.[`/${normalizedPath}`]?.actions || [];
-
-  return (
-    <AppLayoutContainer>
-      <Sidebar menu={menu} collapsed={collapsed} setCollapsed={setCollapsed} />
-      <motion.div
-        animate={{
-          width: collapsed ? 'calc(100% - 84px)' : 'calc(100% - 278px)',
-        }}
-        transition={{ duration: 0.3, ease: 'circOut' }}
-        style={{
-          margin: '12px 12px 12px 0px',
-          width: isSmallScreen ? '100%' : 'calc(100% - 84px)',
-          display: isSmallScreen ? 'contents' : 'block',
-        }}
-      >
-        <AppHeader
-          clientName={clientName}
-          userFullName={userName}
-          designation={designation}
-          actions={actions}
-          profileActions={[<ChangePasswordDialog />, ...profileActions]}
-          collapsed={collapsed}
-          showActiveDevices={false}
-          onLogoutClick={handleLogout ?? logout}
-          institutionsData={institutionData}
-          {...(isSmallScreen && {
-            profileSx: { width: 32, height: 32, fontSize: '12px' },
-          })}
-        />
-        {helpDocsConfig && helpDocsActions.length > 0 && (
-          <HelpDocs actions={helpDocsActions} />
-        )}
-
-        <OutletContainer
-          sx={{
-            margin: '12px 0px 0px 0px',
-            backgroundColor: theme.palette.surface.paperBackground,
-            ...mainContainerSx,
-          }}
-          onClick={() => {
-            setCollapsed(true);
-          }}
-        >
-          <Suspense fallback={<Spinner />}>
-            <ErrorBoundary>{children}</ErrorBoundary>
-          </Suspense>
-        </OutletContainer>
-      </motion.div>
-    </AppLayoutContainer>
-  );
-};
-
-const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
-  flexDirection: 'row',
-  backgroundColor: theme.palette.surface.defaultBackground,
-
-  [theme.breakpoints.down('md')]: { flexWrap: 'wrap' },
-}));
-
-const OutletContainer = styled(Box)(({ theme }: { theme?: any }) => ({
-  borderRadius: '8px',
-  height: 'calc(100vh - 96px)',
-  overflowY: 'scroll',
-  width: '100%',
-
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.2em',
-    backgroundColor: theme.palette.surface.defaultBackground,
-  },
-
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: theme.palette.primary.light,
-    borderRadius: '3px',
-
-    '&:hover': { backgroundColor: theme.palette.primary.main },
-  },
-
-  [theme.breakpoints.down('md')]: {
-    margin: '0px 12px 12px 12px',
-    height: 'calc(100vh - 118px)',
-
-    '&::-webkit-scrollbar': { display: 'none' },
-  },
-}));