@campxdev/campx-web-utils 1.4.1 → 2.0.0-alpha.2

package/export.ts

@@ -1,9 +1,6 @@
-export * from './src/components/ChangePassword';
 export * from './src/config';
 export * from './src/context/export';
 export * from './src/hooks/export';
-export * from './src/layout/AppLayout/AppLayout';
-export * from './src/layout/AppLayout/components/HelpDocs';
 export * from './src/selectors/export';
 export * from './src/utils/constants';
 export * from './src/utils/openInNewTab';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "1.4.1",
+  "version": "2.0.0-alpha.2",
   "author": "CampX",
   "license": "MIT",
   "keywords": [
@@ -13,32 +13,28 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "style": "dist/styles.css",
   "files": [
     "dist",
     "src",
-    "export.ts"
+    "export.ts",
+    "types"
   ],
   "private": false,
   "peerDependencies": {
     "@campxdev/react-blueprint": ">=2.3.11",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^8.1.0",
-    "@mui/x-date-pickers": "^8.1.0",
     "react-redux": "=>9.1.2",
     "react-router-dom": "^6.24.0"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "2.3.11",
+    "@campxdev/react-blueprint": "3.0.0-alpha.8",
     "@hookform/resolvers": "^2.9.10",
-    "@mui/x-date-pickers": "^8.1.0",
     "axios": "^1.7.2",
     "cookie-js": "^0.0.1",
     "date-fns": "^4.1.0",
     "device-detector-js": "^3.0.3",
     "framer-motion": "^11.3.21",
+    "lucide-react": "^0.553.0",
     "pullstate": "^1.25.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -65,6 +61,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
+    "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -82,20 +79,23 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-query": "^1.2.9",
     "@types/react-router-dom": "^5.3.3",
+    "postcss-import": "^16.1.1",
     "rollup": "^4.10.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "^5.12.0"
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "tailwindcss": "^4.1.17"
   },
   "scripts": {
     "start": "craco start",
     "test": "craco test",
     "yalc:w": "copy package.json package.json.backup && node -e \"const fs=require('fs'); const pkg=JSON.parse(fs.readFileSync('./package.json')); pkg.main='export.ts'; pkg.module='export.ts'; pkg.types='export.ts'; pkg.exports={'.':'./export.ts'}; delete pkg.scripts.prepare; fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));\" && yalc publish --push --sig --no-scripts && move /Y package.json.backup package.json",
     "eject": "react-scripts eject",
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "NODE_OPTIONS='--max-old-space-size=4096' rollup -c --bundleConfigAsCjs",
     "yalc:dev": "cp package.json package.json.backup && node -e \"const fs=require('fs'); const pkg=JSON.parse(fs.readFileSync('./package.json')); pkg.main='export.ts'; pkg.module='export.ts'; pkg.types='export.ts'; pkg.exports={'.':'./export.ts'}; delete pkg.scripts.prepare; fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));\" && yalc publish --push --sig --no-scripts && mv package.json.backup package.json",
     "prepare": "npm run build"
   },

package/src/AppContent.tsx

@@ -1,19 +1,5 @@
-import { Breadcrumbs, Icons, TextField } from '@campxdev/react-blueprint';
-import { useState } from 'react';
-import { CourseSelector } from './selectors/CourseSelector';
-
 function AppContent() {
-  const [value, setValue] = useState('63b810ee995d6d64f4a248de');
-
-  return (
-    <>
-      <Breadcrumbs pathTrimCount={0} />
-      <TextField label="habdkhabs" />
-      <Icons.AppsIcon />
-
-      <CourseSelector onChange={() => {}} />
-    </>
-  );
+  return <>Hello</>;
 }
 
 export default AppContent;

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -6,7 +6,6 @@ import {
   ResourceNotFound,
   UnAuthorized,
 } from '@campxdev/react-blueprint';
-import { Alert, Box, styled } from '@mui/material';
 import Cookies from 'js-cookie';
 import { ReactNode, useState } from 'react';
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
@@ -20,26 +19,6 @@ export type ErrorBoundaryProps = {
   children: ReactNode;
 };
 
-const StyledAlert = styled(Alert)(({ theme }) => ({
-  height: '60px',
-  border: `1px solid ${theme.palette.error.main}`,
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiAlert-message': {
-    padding: 0,
-  },
-  '& .MuiTypography-root': {
-    margin: 0,
-  },
-  position: 'relative',
-  '& .retryBtn': {
-    color: '#661B2A',
-    position: 'absolute',
-    right: 8,
-    top: 8,
-  },
-}));
-
 export const ErrorBoundary = (props: ErrorBoundaryProps) => {
   const location = useLocation();
   return (
@@ -75,20 +54,21 @@ const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
   }
 
   return (
-    <Box sx={{ marginTop: '16px', padding: '20px' }}>
-      <StyledAlert severity="error">
-        {error?.response?.data?.message ?? error?.message}
+    <div className="mt-4 p-5">
+      <div className="relative h-15 border border-red-200 bg-red-50 flex items-center rounded-md  px-2">
+        <div className="flex-1 text-red-700 bg-transparent">
+          {error?.response?.data?.message ?? error?.message}
+        </div>
         <Button
-          className="retryBtn"
           onClick={() => resetErrorBoundary()}
-          size="small"
-          color="error"
-          variant="outlined"
+          size="sm"
+          variant="link"
+          className="hover:no-underline text-destructive"
         >
           Try Again
         </Button>
-      </StyledAlert>
-    </Box>
+      </div>
+    </div>
   );
 };
 
@@ -114,13 +94,7 @@ const UnAuth = () => {
     <UnAuthorized
       component={
         <>
-          <Button
-            sx={{
-              marginTop: '20px',
-            }}
-            variant="contained"
-            onClick={handleLoginClick}
-          >
+          <Button className="mt-5" variant="default" onClick={handleLoginClick}>
             Click Here To Login
           </Button>
           <Dialog

package/src/context/ErrorBoundary/Login.tsx

@@ -1,6 +1,10 @@
-import { Button, Icons, TextField } from '@campxdev/react-blueprint';
+import {
+  Button,
+  Icons,
+  PasswordField,
+  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';
@@ -141,70 +145,57 @@ export const Login = ({ close }: { close: () => void }) => {
   };
 
   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>
-    </>
+    <div className="flex flex-col gap-8 justify-center items-center p-8">
+      <div className="flex items-center justify-center h-9 w-48">
+        <Icons.CampxFullLogoIcon />
+      </div>
+      <div className="flex flex-col gap-4 w-full max-w-[400px]">
+        <Controller
+          control={control}
+          render={({ field }: { field: any }) => {
+            return (
+              <TextField
+                name="username"
+                placeholder="Enter Username or Email"
+                onChange={field.onChange}
+                label="Username or Email"
+                error={!!errors.username}
+                required
+                fullWidth
+              />
+            );
+          }}
+          name="username"
+        />
+        <Controller
+          control={control}
+          render={({ field }: { field: any }) => {
+            return (
+              <PasswordField
+                name="password"
+                placeholder="Enter password"
+                onChange={field.onChange}
+                label="Password"
+                error={!!errors.password}
+                required
+                fullWidth
+              />
+            );
+          }}
+          name="password"
+        />
+        <Button
+          type="submit"
+          color="primary"
+          variant="default"
+          onClick={handleSubmit(onSubmit)}
+          disabled={isLoading}
+          loading={isLoading}
+          fullWidth
+        >
+          Login
+        </Button>
+      </div>
+    </div>
   );
 };

package/src/context/Providers.tsx

@@ -1,6 +1,3 @@
-import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import {
   combineReducers,
   configureStore,
@@ -20,12 +17,10 @@ export { BrowserRouter } from 'react-router-dom';
 export const Providers = ({
   children,
   basename,
-  theme = lightTheme,
   reducers = {},
 }: {
   children: ReactNode;
   basename?: string;
-  theme?: any;
   reducers?: ReducersMapObject;
 }) => {
   const queryClient = new QueryClient({
@@ -62,13 +57,9 @@ export const Providers = ({
     <Provider store={store}>
       <BrowserRouter basename={basename ?? baseName}>
         <QueryClientProvider client={queryClient}>
-          <MuiThemeProvider theme={theme}>
-            <SnackbarProvider>
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
-                <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
-              </LocalizationProvider>
-            </SnackbarProvider>
-          </MuiThemeProvider>
+          <SnackbarProvider>
+            <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
+          </SnackbarProvider>
         </QueryClientProvider>
       </BrowserRouter>
     </Provider>

package/src/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
 import reportWebVitals from './reportWebVitals';
+import './styles/index.css';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,

package/src/routes/main.tsx

@@ -1,4 +1,5 @@
-import { AppLayout, Icons } from '@campxdev/react-blueprint';
+import { AppLayout } from '@campxdev/react-blueprint';
+import { ShieldUser } from 'lucide-react';
 import { Navigate, Outlet } from 'react-router-dom';
 import AppContent from '../AppContent';
 
@@ -19,7 +20,7 @@ export const mainRoutes = [
           {
             name: 'App Content',
             path: '/app-content',
-            icon: <Icons.AdminIcon size={20} />,
+            icon: <ShieldUser size={20} />,
           },
         ]}
         userProfileParams={userProfileParams}
@@ -30,10 +31,10 @@ export const mainRoutes = [
     children: [
       {
         index: true,
-        element: <Navigate to={'app-content/abc/xyz/digital-notice-board'} />,
+        element: <Navigate to={'app-content/home'} />,
       },
       {
-        path: 'app-content/abc/xyz/digital-notice-board',
+        path: 'app-content/home',
         element: <AppContent />,
       },
     ],

package/src/styles/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+
+/* Import react-blueprint theme variables and component styles */
+@import '@campxdev/react-blueprint/dist/styles.css';

package/types/prettier.d.ts

@@ -0,0 +1,2 @@
+// prettier.d.ts
+declare module 'prettier';

package/dist/cjs/types/src/components/ActivityLog.d.ts

@@ -1,13 +0,0 @@
-import { Store } from 'pullstate';
-export type ActivityLogType = {
-    activitiesData: any[];
-    lastTimestamp: number | null;
-};
-export type ActivityLogStoreType = {
-    [logType: string]: ActivityLogType;
-};
-export declare const ActivityLogStore: Store<ActivityLogStoreType>;
-export default function ActivityLog({ apiEndpoint, params, }: {
-    apiEndpoint: string;
-    params: Record<string, any>;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/ChangePassword.d.ts

@@ -1,9 +0,0 @@
-interface ChangePasswordProps {
-    close: () => void;
-}
-export declare const StyledMenuItem: import("@mui/styled-engine").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLLIElement>;
-}, "children" | "disabled" | "className" | "style" | "classes" | "divider" | "sx" | "autoFocus" | "tabIndex" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare function ChangePassword({ close }: ChangePasswordProps): import("react/jsx-runtime").JSX.Element;
-export declare const ChangePasswordDialog: React.FC;
-export {};

package/dist/cjs/types/src/layout/AppLayout/AppLayout.d.ts

@@ -1,23 +0,0 @@
-import { SideMenuItemProps } from '@campxdev/react-blueprint';
-import { ReactNode } from 'react';
-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 declare const AppLayout: React.FC<Props>;
-export {};

package/dist/cjs/types/src/layout/AppLayout/components/HelpDocs.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface HelpDocsActionType {
-    name: string;
-    onClick?: () => void;
-    backgroundColor?: string;
-}
-interface HelpDocsProps {
-    actions: HelpDocsActionType[];
-}
-export declare const HelpDocs: React.FC<HelpDocsProps>;
-export {};

package/dist/esm/types/src/components/ActivityLog.d.ts

@@ -1,13 +0,0 @@
-import { Store } from 'pullstate';
-export type ActivityLogType = {
-    activitiesData: any[];
-    lastTimestamp: number | null;
-};
-export type ActivityLogStoreType = {
-    [logType: string]: ActivityLogType;
-};
-export declare const ActivityLogStore: Store<ActivityLogStoreType>;
-export default function ActivityLog({ apiEndpoint, params, }: {
-    apiEndpoint: string;
-    params: Record<string, any>;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ChangePassword.d.ts

@@ -1,9 +0,0 @@
-interface ChangePasswordProps {
-    close: () => void;
-}
-export declare const StyledMenuItem: import("@mui/styled-engine").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLLIElement>;
-}, "children" | "disabled" | "className" | "style" | "classes" | "divider" | "sx" | "autoFocus" | "tabIndex" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare function ChangePassword({ close }: ChangePasswordProps): import("react/jsx-runtime").JSX.Element;
-export declare const ChangePasswordDialog: React.FC;
-export {};

package/dist/esm/types/src/layout/AppLayout/AppLayout.d.ts

@@ -1,23 +0,0 @@
-import { SideMenuItemProps } from '@campxdev/react-blueprint';
-import { ReactNode } from 'react';
-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 declare const AppLayout: React.FC<Props>;
-export {};

package/dist/esm/types/src/layout/AppLayout/components/HelpDocs.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface HelpDocsActionType {
-    name: string;
-    onClick?: () => void;
-    backgroundColor?: string;
-}
-interface HelpDocsProps {
-    actions: HelpDocsActionType[];
-}
-export declare const HelpDocs: React.FC<HelpDocsProps>;
-export {};

package/dist/types/theme.d.ts

@@ -1,63 +0,0 @@
-import '@mui/material/styles';
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    palette: {
-      [x: string]: any;
-      primary: {
-        dark: string;
-        main: string;
-        light: string;
-      };
-      secondary: {
-        main: string;
-        light: string;
-        dark: string;
-      };
-      tertiary: {
-        main: string;
-      };
-      text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        black: string;
-        white: string;
-        primaryContrast: string;
-      };
-      surface: {
-        defaultBackground: string;
-        paperBackground: string;
-        grey: string;
-      };
-      border: {
-        primary: string;
-        secondary: string;
-      };
-      highlight: {
-        highlightGreen: string;
-        highlightOrange: string;
-        highlightBlue: string;
-        highlightRed: string;
-        highlightPink: string;
-        highlightYellow: string;
-        greenBackground: string;
-        orangeBackground: string;
-        blueBackground: string;
-        redBackground: string;
-        pinkBackground: string;
-        yellowBackground: string;
-      };
-    };
-  }
-  export function createTheme(options?: CustomThemeOptions): CustomTheme;
-}
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    label1: true;
-    label2: true;
-    subtitle3: true;
-    button1: true;
-  }
-}

package/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}