@campxdev/react-blueprint 1.0.5 → 1.0.6

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -0,0 +1,31 @@
+import { internalServerError } from "../../../assets/images/svg";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Button } from "../../export";
+import { StyledBox } from "./styles";
+
+export const InternalServerError = ({ resetBoundary }: any) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={internalServerError}
+          alt="page not found"
+          width={"350px"}
+          style={{ margin: "20px" }}
+        />
+        <Typography variant="subtitle1">Internal Server Error</Typography>
+        <Typography variant="body2">
+          An unexpected error occurred on our server.
+        </Typography>
+        <Typography variant="body2">Please try again later.</Typography>
+        <Button
+          sx={{ marginTop: "20px" }}
+          variant="contained"
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
+};

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -0,0 +1,33 @@
+import { noConnection } from "../../../assets/images/svg";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Button } from "../../export";
+import { StyledBox } from "./styles";
+
+export const NoInterneConnection = ({ resetBoundary }: any) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={noConnection}
+          alt="page not found"
+          width={"350px"}
+          style={{ margin: "20px" }}
+        />
+        <Typography variant="subtitle1">No Internet Connection</Typography>
+        <Typography variant="body2">
+          It seems you're offline. Please check your
+        </Typography>
+        <Typography variant="body2">
+          internet connection and try again.
+        </Typography>
+        <Button
+          sx={{ marginTop: "20px" }}
+          variant="contained"
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
+};

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -0,0 +1,33 @@
+import { emptyListImage } from "../../../assets/images/svg";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Button } from "../../export";
+import { StyledBox } from "./styles";
+
+export const NoItemFound = ({ resetBoundary }: any) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={emptyListImage}
+          alt="page not found"
+          width={"350px"}
+          style={{ margin: "20px" }}
+        />
+        <Typography variant="subtitle1">No Items Found</Typography>
+        <Typography variant="body2">
+          There are no items to display. Please add new
+        </Typography>
+        <Typography variant="body2">
+          items or adjust your filter criteria.
+        </Typography>
+        <Button
+          sx={{ marginTop: "20px" }}
+          variant="contained"
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
+};

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -0,0 +1,33 @@
+import { errorCactus } from "../../../assets/images/svg";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Button } from "../../export";
+import { StyledBox } from "./styles";
+
+export const PageNotFound = ({ resetBoundary }: any) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={errorCactus}
+          alt="page not found"
+          width={"350px"}
+          style={{ margin: "20px" }}
+        />
+        <Typography variant="subtitle1">Page Not Found.</Typography>
+        <Typography variant="body2">
+          Oops! The page you are looking for doesn't exist.
+        </Typography>
+        <Typography variant="body2">
+          Please check the URL or return to the homepage.
+        </Typography>
+        <Button
+          sx={{ marginTop: "20px" }}
+          variant="contained"
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  );
+};

package/src/components/Assets/ErrorPages/UnAuthorized.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { unAuthorized } from "../../../assets/images/svg";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { StyledBox } from "./styles";
+
+export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={unAuthorized}
+          alt="page not found"
+          width={"350px"}
+          style={{ margin: "20px" }}
+        />
+        <Typography variant="subtitle1">Unauthorized Access</Typography>
+        <Typography variant="body2">
+          You must be logged in to view this page.
+        </Typography>
+        <Typography variant="body2">Please log in to continue.</Typography>
+        {component}
+      </StyledBox>
+    </>
+  );
+};

package/src/components/Assets/ErrorPages/styles.tsx

@@ -0,0 +1,29 @@
+import { Alert, Box, styled } from "@mui/material";
+
+export 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 StyledBox = styled(Box)(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+}));

package/src/components/Assets/export.ts

@@ -1 +1,6 @@
+export * from "./ErrorPages/InternalServerError";
+export * from "./ErrorPages/NoInternetConnection";
+export * from "./ErrorPages/NoItemFound";
+export * from "./ErrorPages/PageNotFound";
+export * from "./ErrorPages/UnAuthorized";
 export * from "./Icons/Icons";

package/src/components/Input/components/FetchingOptionsLoader.tsx

@@ -3,12 +3,12 @@ import { Spinner } from "../../Feedback/Spinner/Spinner";
 import { FetchingOptionsLoaderContainer } from "../styles";
 
 export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
-  return (
-    loading && (
-      <FetchingOptionsLoaderContainer direction="row" alignItems="center">
-        <Spinner />
-        <Typography variant="caption">Fetching Options</Typography>
-      </FetchingOptionsLoaderContainer>
-    )
+  return loading ? (
+    <FetchingOptionsLoaderContainer direction="row" alignItems="center">
+      <Spinner />
+      <Typography variant="caption">Fetching Options</Typography>
+    </FetchingOptionsLoaderContainer>
+  ) : (
+    <></>
   );
 };

package/src/components/export.ts

@@ -1,7 +1,7 @@
 export * from "./Assets/export";
 export * from "./DataDisplay/export";
-export * from "./Input/export";
-
 export * from "./Feedback/exports";
+export * from "./Input/export";
 export * from "./Layout/exports";
 export * from "./Navigation/exports";
+

package/src/stories/DesignSystem/typography.stories.tsx

@@ -47,7 +47,7 @@ export const TypographyStyles = () => (
       text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
-      variant="subtitle1"
+      variant="subtitle3"
       fontInfo={{ family: "Poppins", weight: "400", size: "14px" }}
       text="Subtitle 3 (subtitle3) - Lorem ipsum dolor sit."
     />