@campxdev/react-blueprint 1.0.9 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/DataDisplay/Card/Card.tsx

@@ -0,0 +1,145 @@
+import { ChevronRight, MoreHoriz } from "@mui/icons-material";
+
+import {
+  Checkbox,
+  Stack,
+  Typography,
+  Card as MuiCard,
+  SxProps,
+  CardContent,
+} from "@mui/material";
+import { ReactNode } from "react";
+import {
+  StyledButton,
+  StyledCardActions,
+  StyledDivider,
+  StyledHeader,
+  StyledIcon,
+  StyledImage,
+  StyledStack,
+  StyledStatusText,
+} from "./styles";
+import { DropDownIcon, DropdownMenu } from "../../export";
+
+export interface CardProps {
+  title: string;
+  caption?: string;
+  footer?: {
+    buttonText?: string | ReactNode;
+    onClick: () => void;
+    endIcon?: ReactNode;
+    buttonProps?: any;
+  };
+  fields?: [
+    {
+      title: string;
+      value: string;
+    },
+  ];
+  status?: string;
+  imageSrc?: string;
+  checkBox?: boolean;
+  moreOptions?: boolean;
+  menu?: Array<ReactNode>;
+  icon?: ReactNode;
+  statusSx?: SxProps;
+  cardSx?: SxProps;
+}
+
+export const Card = ({
+  title,
+  caption,
+  status,
+  footer,
+  fields,
+  imageSrc,
+  checkBox,
+  statusSx,
+  cardSx,
+  moreOptions,
+  icon,
+  menu = [],
+}: CardProps) => {
+  const handleClick = (e: any) => {
+    footer?.onClick();
+  };
+
+  return (
+    <MuiCard sx={cardSx}>
+      {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
+      <StyledHeader>
+        <Stack gap={"8px"} flexDirection={"row"}>
+          {checkBox && (
+            <StyledStack>
+              <Checkbox />
+            </StyledStack>
+          )}
+
+          <Stack justifyContent={"center"}>
+            <Typography variant="subtitle2">{title}</Typography>
+            <Typography variant="caption">{caption}</Typography>
+          </Stack>
+        </Stack>
+        <Stack flexDirection={"row"} gap={"12px"} alignItems={"center"}>
+          {status && (
+            <StyledStatusText variant="label2" sx={statusSx}>
+              {status}{" "}
+            </StyledStatusText>
+          )}
+          {moreOptions && (
+            <>
+              <DropdownMenu
+                anchor={({ open }) => (
+                  <DropDownIcon
+                    handleClick={open}
+                    icon={{
+                      icon: (
+                        <StyledIcon>{icon ? icon : <MoreHoriz />}</StyledIcon>
+                      ),
+                      iconProps: { color: "secondary" },
+                      outlined: false,
+                    }}
+                  />
+                )}
+                menu={menu}
+              />
+            </>
+          )}
+        </Stack>
+      </StyledHeader>
+      {fields && (
+        <CardContent>
+          <Stack
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: "20px",
+            }}
+          >
+            {fields.map((field, index) => (
+              <Stack key={index} flexDirection="row" gap="14px">
+                {index % 2 === 1 && <StyledDivider flexItem />}
+                <Stack gap="4px">
+                  <Typography variant="caption">{field.title}</Typography>
+                  <Typography variant="body2">{field.value}</Typography>
+                </Stack>
+              </Stack>
+            ))}
+          </Stack>
+        </CardContent>
+      )}
+
+      {footer && (
+        <StyledCardActions>
+          <StyledButton
+            variant="text"
+            onClick={handleClick}
+            endIcon={footer?.endIcon ?? <ChevronRight />}
+          >
+            {footer?.buttonText ?? "View"}
+          </StyledButton>
+        </StyledCardActions>
+      )}
+    </MuiCard>
+  );
+};

package/src/components/DataDisplay/Card/styles.tsx

@@ -0,0 +1,65 @@
+import {
+  Box,
+  Button,
+  CardActions,
+  CardContent,
+  Divider,
+  IconButton,
+  Card as MuiCard,
+  Stack,
+  styled,
+  Typography,
+} from "@mui/material";
+
+export const StyledCardActions = styled(CardActions)(({ theme }) => ({
+  //${} add border color
+  borderTop: `1px solid ${theme.palette.border.primary}`,
+  padding: "0",
+}));
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "8px 16px",
+
+}));
+
+export const StyledImage = styled("img")(({ theme }) => ({
+  height: "216px",
+  width: "385px",
+  objectFit: "cover",
+}));
+
+export const StyledHeader = styled(Stack)(({ theme }) => ({
+  padding: "12px 16px",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+}));
+
+export const StyledStack = styled(Stack)(({ theme }) => ({
+  width: "50px",
+  height: "50px",
+  backgroundColor: theme.palette.surface.grey,
+  borderRadius: "50%",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
+export const StyledStatusText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.highlight.highlightBlue,
+  padding: "5px 10px",
+  backgroundColor: theme.palette.highlight.blueBackground,
+  borderRadius: "4px",
+}));
+
+export const StyledIcon = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.text.primary,
+}));
+
+export const StyledDivider = styled(Divider)(({ theme }) => ({
+  orientation: "vertical",
+  border: "1px solid #CECECE",
+}));

package/src/components/Input/export.ts

@@ -1,6 +1,7 @@
 export * from "./Button/Button";
 export * from "./MultiCheckBox/MultiCheckBox";
 export * from "./SearchBar/SearchBar";
+export * from "./SingleCheckBox/SIngleCheckBox";
 export * from "./SingleSelect/SingleSelect";
 export * from "./Switch/Switch";
 export * from "./TextField/TextField";

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -51,13 +51,8 @@ export const Sidebar = ({
     let resolved = useResolvedPath(path);
     let match = useMatch({ path: resolved.pathname, end: false });
     return (
-      <StyledListItem
-        key={path}
-        disablePadding
-        match={match}
-        className="listItem"
-      >
-        <StyledLinkButton to={path}>
+      <StyledListItem key={path} disablePadding className="listItem">
+        <StyledLinkButton to={path} match={match}>
           {!collapsed && (
             <StyledListItemButton collapsed={collapsed}>
               <StyledListItemIcon collapsed={collapsed}>

package/src/components/Navigation/Sidebar/styles.tsx

@@ -44,36 +44,50 @@ export const createSidebarStyles = (collapsed: boolean) => {
     backgroundColor: theme.palette.surface.paperBackground,
     height: "60px",
   }));
-  interface StyledListItemProps {
+
+  interface StyledLinkButtonProps {
     match: any;
   }
-  const StyledListItem = styled(ListItem)<StyledListItemProps>(
+
+  const StyledListItem = styled(ListItem)(({ theme }) => ({
+    // width: collapsed ? "min-content" : "auto",
+    // backgroundColor: match ? theme.palette.secondary.main : "none",
+    display: "flex",
+    justifyContent: "center",
+    borderRadius: "4px",
+  }));
+
+  const StyledLinkButton = styled(Link)<StyledLinkButtonProps>(
     ({ theme, match }) => ({
+      width: collapsed ? "auto" : "100%",
+      textDecoration: "none",
+      display: "flex",
+      margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
+
       backgroundColor: match ? theme.palette.secondary.main : "none",
-      width: collapsed ? "min-content" : "auto",
-      margin: "5px 8px",
+      justifyContent: "center",
+      "&:hover": {
+        color: "unset",
+      },
       borderRadius: "4px",
     })
   );
 
-  const StyledLinkButton = styled(Link)({
-    width: "100%",
-    textDecoration: "none",
-    "&:hover": {
-      color: "unset",
-    },
-  });
+  interface StyledListItemButtonProps {
+    collapsed: boolean;
+  }
 
-  const StyledListItemButton = styled(ListItemButton)(
-    ({ collapsed }: { collapsed: boolean }) => ({
-      display: "flex",
-      alignItems: "center",
-      justifyContent: collapsed ? "center" : "flex-start",
-      paddingBottom: "5px",
-      paddingTop: "5px",
-      width: "100%",
-    })
-  );
+  const StyledListItemButton = styled(
+    ListItemButton
+  )<StyledListItemButtonProps>(({ collapsed }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: collapsed ? "center" : "flex-start",
+    paddingBottom: "5px",
+    paddingTop: "5px",
+    width: "100%",
+    borderRadius: "5px",
+  }));
 
   const StyledListItemIcon = styled(ListItemIcon)(
     ({ collapsed }: { collapsed: boolean }) => ({

package/src/stories/DataDisplay/Card.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta } from "@storybook/react";
+import { Card, CardProps } from "../../components/DataDisplay/Card/Card";
+import { Stack } from "@mui/material";
+import { GridMenuIcon } from "@mui/x-data-grid";
+
+export default {
+  title: "DataDisplay/Card",
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof Card>;
+
+export const Standard = {
+  render: (args: CardProps) => <Card {...args} />,
+  args: {
+    title: "Academic Administrator WS",
+    caption:
+      "A centralized hub designed to streamline and manage administrative tasks efficiently.",
+    fields: [
+      {
+        title: "Start year / End Year",
+        value: "2024 / 2028",
+      },
+      {
+        title: "Current Sem",
+        value: "1",
+      },
+      {
+        title: "Total Students",
+        value: "1324",
+      },
+    ],
+    footer: {
+      buttonText: "View Details",
+      onClick: () => alert(`Details Viewed`),
+    },
+  },
+};
+export const StandardWithImage = {
+  render: (args: CardProps) => (
+    <Stack flexDirection={"row"} gap={"20px"}>
+      <Card {...args} /> <Card {...args} /> <Card {...args} />{" "}
+    </Stack>
+  ),
+
+  args: {
+    title: "ECE 2024 - 25",
+    caption: "Started on July 24, 2024",
+    status: "Active",
+    fields: [
+      {
+        title: "Start year / End Year",
+        value: "2024 / 2028",
+      },
+      {
+        title: "Current Sem",
+        value: "1",
+      },
+      {
+        title: "Total Students",
+        value: "1324",
+      },
+      {
+        title: "Total Students",
+        value: "1324",
+      },
+      {
+        title: "Total Students",
+        value: "1324",
+      },
+    ],
+    footer: {
+      buttonText: "View Details",
+      onClick: () => alert(`Details Viewed`),
+    },
+    imageSrc:
+      "https://i.pinimg.com/564x/aa/a5/90/aaa5903de24897afa5b07fd9f4092866.jpg",
+    moreOptions: true,
+  },
+};
+
+export const Statistic = {
+  render: (args: CardProps) => <Card {...args} />,
+  args: {
+    title: "ECE 2024 - 25",
+    caption: "Started on July 24, 2024",
+  },
+};

package/src/themes/commonTheme.ts

@@ -111,6 +111,15 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            boxShadow: "none",
+            border: `1px solid ${ColorTokens.border.primary}`,
+            borderRadius: "8px",
+          },
+        },
+      },
       MuiDialog: {
         styleOverrides: {
           root: {