@campxdev/react-blueprint 1.0.4 → 1.0.6

package/src/components/Charts/PieChart/PieChart.tsx

@@ -0,0 +1,95 @@
+import { Stack, SxProps, Typography, useTheme } from "@mui/material";
+import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from "recharts";
+import { LegendProps, MarginProps } from "../types/types";
+
+export type PieChartProps = {
+  title?: string;
+  titleSx?: SxProps;
+  margin?: MarginProps;
+  width?: number;
+  height?: number;
+  pie1: PieProps;
+  pie2?: PieProps;
+  containerSx?: SxProps;
+  showLegend?: boolean;
+  legendSx?: LegendProps;
+  showToolTip?: boolean;
+};
+
+type PieProps = {
+  data: any[];
+  dataKey: string;
+  innerRadius?: number;
+  outerRadius?: number;
+  fill?: string;
+  label?: boolean;
+  cx?: string;
+  cy?: string;
+  colors?: string[];
+};
+
+export const PieChart = ({
+  title = "Pie Chart",
+  titleSx,
+  margin,
+  width = 500,
+  height = 500,
+  showToolTip = true,
+  showLegend = true,
+  legendSx,
+  pie1,
+  pie2,
+  containerSx,
+}: PieChartProps) => {
+  const theme = useTheme();
+
+  return (
+    <Stack alignItems="center" sx={{ ...containerSx }}>
+      <Typography variant="h5" align="center" sx={{ ...titleSx }}>
+        {title}
+      </Typography>
+      <RePieChart width={width} height={height} margin={margin}>
+        {showToolTip && (
+          <Tooltip
+            itemStyle={{
+              color: theme.palette.text.primary,
+            }}
+            contentStyle={{
+              color: theme.palette.text.secondary,
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: "5px",
+              padding: "5px 10px",
+            }}
+          />
+        )}
+        {showLegend && <Legend {...legendSx} />}
+        <Pie {...pie1} cx={pie1?.cx ?? "50%"} cy={pie1?.cy ?? "50%"}>
+          {pie1?.data.map((entry, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={
+                pie1.colors
+                  ? pie1.colors[index % pie1.colors.length]
+                  : pie1.fill
+              }
+            />
+          ))}
+        </Pie>
+        {pie2 && (
+          <Pie {...pie2} cx={pie2?.cx ?? "50%"} cy={pie2?.cy ?? "50%"}>
+            {pie2?.data.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={
+                  pie2.colors
+                    ? pie2.colors[index % pie2.colors.length]
+                    : pie2.fill
+                }
+              />
+            ))}
+          </Pie>
+        )}
+      </RePieChart>
+    </Stack>
+  );
+};

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -0,0 +1,151 @@
+import {
+  Box,
+  Stack,
+  styled,
+  SxProps,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { Treemap as ReTreeMap, Tooltip } from "recharts";
+import { AnimationTiming } from "recharts/types/util/types";
+import { MarginProps } from "../types/types";
+
+interface TreeMapProps {
+  title?: string;
+  titleSx?: any;
+  data: any;
+  dataKey: string | number;
+  width?: number;
+  height?: number;
+  margin?: MarginProps;
+  aspectRatio?: number;
+  fill?: string;
+  stroke?: string;
+  colors?: string[];
+  showToolTip?: boolean;
+  isAnimationActive?: boolean;
+  animationEasing?: AnimationTiming;
+  treeMapStyle?: SxProps;
+  containerSx?: any;
+}
+
+const TreeMap = ({
+  title = "Tree Map",
+  titleSx,
+  data,
+  dataKey,
+  width = 400,
+  height = 200,
+  aspectRatio,
+  fill = "#F8C12D",
+  stroke = "#fff",
+  colors,
+  showToolTip = true,
+  animationEasing = "linear",
+  isAnimationActive = false,
+  treeMapStyle,
+  containerSx,
+}: TreeMapProps) => {
+  return (
+    <Stack alignItems={"center"} sx={{ ...containerSx }}>
+      <Typography variant={"h5"} align={"center"} sx={{ ...titleSx }}>
+        {title}
+      </Typography>
+      <ReTreeMap
+        data={data}
+        dataKey={dataKey}
+        width={width}
+        height={height}
+        aspectRatio={aspectRatio}
+        fill={fill}
+        stroke={stroke}
+        style={treeMapStyle}
+        isAnimationActive={isAnimationActive}
+        animationEasing={animationEasing}
+        content={<CustomizedContent colors={colors} />}
+      >
+        {showToolTip && <Tooltip content={CustomTooltip} />}
+      </ReTreeMap>
+    </Stack>
+  );
+};
+
+export default TreeMap;
+
+const CustomizedContent = (props: any) => {
+  const theme = useTheme();
+  const {
+    root,
+    depth,
+    x,
+    y,
+    width,
+    height,
+    index,
+    payload,
+    colors,
+    rank,
+    name,
+  } = props;
+
+  return (
+    <g {...props}>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        style={{
+          fill:
+            depth < 2
+              ? colors[
+                  Math.floor((index / root.children.length) * colors.length)
+                ]
+              : "#ffffff00",
+          stroke: theme.palette.surface.grey,
+          strokeWidth: 2,
+          strokeOpacity: 1,
+        }}
+      />
+      {depth === 1 ? (
+        <text
+          x={x + width / 2}
+          y={y + height / 2}
+          textAnchor="middle"
+          fill={theme.palette.text.primary}
+          fontSize={14}
+          strokeOpacity={0}
+        >
+          {name}
+        </text>
+      ) : null}
+    </g>
+  );
+};
+
+const CustomTooltip = ({ active, payload }: any) => {
+  const theme = useTheme();
+  if (active && payload && payload.length) {
+    return (
+      <StyledContainer>
+        <Typography variant="body2">{`${payload[0].payload.root.name}`}</Typography>
+        <Typography variant="caption">
+          <span>{`${payload[0].payload.name}`}</span>
+          <span
+            style={{ fontWeight: "bold", color: theme.palette.text.primary }}
+          >
+            {"\xa0\xa0" + `${payload[0].value}`}
+          </span>
+        </Typography>
+      </StyledContainer>
+    );
+  }
+
+  return null;
+};
+
+export const StyledContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: "5px",
+  padding: "5px 10px",
+}));

package/src/components/Charts/types/types.ts

@@ -0,0 +1,43 @@
+import { SxProps } from "@mui/material";
+import {
+  HorizontalAlignmentType,
+  IconType,
+  VerticalAlignmentType,
+} from "recharts/types/component/DefaultLegendContent";
+import { LayoutType } from "recharts/types/util/types";
+
+export type CartesianGridProps = {
+  showCartesianGrid: boolean;
+  size?: number;
+};
+
+export type AxisLabelProps = {
+  xLabel?: LabelProps;
+  yLabel?: LabelProps;
+};
+
+export type MarginProps = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type LabelProps = {
+  value: string;
+  dx?: number;
+  dy?: number;
+  angle?: number;
+};
+
+export type LegendProps = {
+  width?: number;
+  height?: number;
+  layout?: LayoutType;
+  align?: HorizontalAlignmentType;
+  verticalAlign?: VerticalAlignmentType;
+  iconSize?: number;
+  iconType?: IconType;
+  margin: MarginProps;
+  className: string;
+};

package/src/components/DataDisplay/Accordion/Accordion.tsx

@@ -0,0 +1,55 @@
+import { ExpandMore } from "@mui/icons-material";
+import {
+  AccordionDetails,
+  Box,
+  Accordion as MuiAccordion,
+  AccordionSummary as MuiAccordionSummary,
+  SxProps,
+} from "@mui/material";
+import { ReactNode, SyntheticEvent, useState } from "react";
+import { Typography } from "../Typography/Typography";
+
+interface AccordionProps {
+  data: AccordionItem[];
+  containerSx?: SxProps;
+}
+interface AccordionItem {
+  title: string | ReactNode;
+  content: string | ReactNode;
+}
+
+export const Accordion = ({ data, containerSx }: AccordionProps) => {
+  const [expanded, setExpanded] = useState<number | false>(false);
+
+  const handleChange =
+    (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false);
+    };
+
+  return (
+    <Box sx={{ ...containerSx }}>
+      {data?.map((item, index) => (
+        <MuiAccordion
+          key={index}
+          expanded={expanded === index}
+          onChange={handleChange(index)}
+        >
+          <MuiAccordionSummary expandIcon={<ExpandMore />}>
+            {typeof item?.title === "string" ? (
+              <Typography variant="subtitle2">{item?.title}</Typography>
+            ) : (
+              item?.title
+            )}
+          </MuiAccordionSummary>
+          <AccordionDetails>
+            {typeof item?.content === "string" ? (
+              <Typography variant="label1">{item?.content}</Typography>
+            ) : (
+              item?.content
+            )}
+          </AccordionDetails>
+        </MuiAccordion>
+      ))}
+    </Box>
+  );
+};

package/src/components/DataDisplay/Accordion/utils/StandardImageList.tsx

@@ -0,0 +1,70 @@
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+
+export default function StandardImageList() {
+  return (
+    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img
+            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+  );
+}
+
+const itemData = [
+  {
+    img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
+    title: "Breakfast",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
+    title: "Burger",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
+    title: "Camera",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
+    title: "Coffee",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
+    title: "Hats",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1558642452-9d2a7deb7f62",
+    title: "Honey",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1516802273409-68526ee1bdd6",
+    title: "Basketball",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1518756131217-31eb79b20e8f",
+    title: "Fern",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1597645587822-e99fa5d45d25",
+    title: "Mushrooms",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1567306301408-9b74779a11af",
+    title: "Tomato basil",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+    title: "Sea star",
+  },
+  {
+    img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+    title: "Bike",
+  },
+];

package/src/components/DataDisplay/export.ts

@@ -1,2 +1,5 @@
+import { Accordion } from "./Accordion/Accordion";
+import { DataTable } from "./DataTable/DataTable";
+
 export * from "./Avatar/Avatar";
-export * from "./DataTable/DataTable";
+export { Accordion, DataTable };

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/Input/export.ts

@@ -1,4 +1,5 @@
 export * from "./Button/Button";
+export * from "./MultiCheckBox/MultiCheckBox";
 export * from "./SearchBar/SearchBar";
 export * from "./SingleSelect/SingleSelect";
 export * from "./Switch/Switch";

package/src/components/Layout/TabsLayout/Tabs.tsx

@@ -0,0 +1,67 @@
+import { Box, Divider, styled } from "@mui/material";
+import { NavLink } from "react-router-dom";
+
+interface TabProps {
+  index: number;
+  path: string;
+  title: string;
+  handleTabChange: (index: number) => void;
+  isActiveTab: boolean;
+  isPrevTab: boolean;
+  isLastTab: boolean;
+}
+
+export const Tab = ({
+  index,
+  path,
+  title,
+  isActiveTab,
+  isPrevTab,
+  isLastTab,
+  handleTabChange,
+}: TabProps) => {
+  return (
+    <Box
+      key={index}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+      }}
+      onClick={() => handleTabChange(index)}
+    >
+      <StyledNavLink to={path} key={path}>
+        {title}
+      </StyledNavLink>
+      {!isActiveTab && !isPrevTab && !isLastTab && (
+        <Divider orientation="vertical" variant="middle" flexItem />
+      )}
+    </Box>
+  );
+};
+
+const StyledNavLink = styled(NavLink)(({ theme }) => ({
+  width: "204px",
+  padding: "12px 26px",
+  textAlign: "center",
+  textDecoration: "none",
+  fontWeight: 400,
+  color: theme.palette.text.secondary,
+  borderTopRightRadius: "12px",
+  borderTopLeftRadius: "12px",
+  backgroundColor: theme.palette.surface.defaultBackground,
+  position: "relative",
+
+  "&.active": {
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.surface.paperBackground,
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      bottom: 0,
+      left: "25%",
+      width: "50%",
+      borderBottom: `4px solid ${theme.palette.tertiary.main}`,
+    },
+  },
+}));

package/src/components/Layout/TabsLayout/TabsLayout.tsx

@@ -0,0 +1,56 @@
+import { Box, Stack, useTheme } from "@mui/material";
+import { useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
+import { Tab } from "./Tabs";
+
+interface TabsLayoutProps {
+  menu: MenuItem[];
+}
+
+interface MenuItem {
+  title: string;
+  path: string;
+  permissionKey?: string;
+}
+
+export const TabsLayout = ({ menu }: TabsLayoutProps) => {
+  const theme = useTheme();
+  const [activeTab, setActiveTab] = useState<number | null>(null);
+  const handleTabChange = (index: number) => {
+    setActiveTab(index);
+  };
+
+  return (
+    <Stack>
+      <Stack
+        direction={"row"}
+        sx={{
+          backgroundColor: theme.palette.surface.defaultBackground,
+        }}
+      >
+        {menu?.map((item, index) => {
+          return (
+            <Tab
+              key={index}
+              index={index}
+              path={item?.path}
+              title={item?.title}
+              handleTabChange={handleTabChange}
+              isActiveTab={index === activeTab}
+              isPrevTab={activeTab !== null && index === activeTab - 1}
+              isLastTab={index === menu?.length - 1}
+            />
+          );
+        })}
+      </Stack>
+      <ErrorBoundary
+        fallbackRender={(error: any) => (
+          <Box>Error: {error?.response?.data?.message ?? error?.message}</Box>
+        )}
+      >
+        <Outlet />
+      </ErrorBoundary>
+    </Stack>
+  );
+};

package/src/components/Layout/exports.ts

@@ -0,0 +1,4 @@
+import { AppHeader } from "./AppHeader/AppHeader";
+import { TabsLayout } from "./TabsLayout/TabsLayout";
+
+export { AppHeader, TabsLayout };

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import {
+  Link,
+  Breadcrumbs as MuiBreadcrumbs,
+  Stack,
+  styled,
+} from "@mui/material";
+import { ReactNode } from "react";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+
+interface BreadcrumbsProps {
+  links: {
+    name: string | ReactNode;
+    to: string;
+  }[];
+}
+
+export const Breadcrumbs = ({ links }: BreadcrumbsProps) => {
+  const linksArray = links?.slice(0, -1);
+  const currentPage = links?.slice(-1)[0];
+
+  return (
+    <Stack direction={"row"} alignItems={"center"}>
+      <MuiBreadcrumbs>
+        {linksArray?.map((item, index) => (
+          <StyledLink key={index} href={item?.to}>
+            {item?.name}
+          </StyledLink>
+        ))}
+        <Typography variant="subtitle2">{currentPage?.name}</Typography>
+      </MuiBreadcrumbs>
+    </Stack>
+  );
+};
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  transition: "color 0.3s ease-in-out",
+  "&:hover": {
+    color: theme.palette.primary.light,
+  },
+}));

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

@@ -50,7 +50,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
   const StyledListItem = styled(ListItem)<StyledListItemProps>(
     ({ theme, match }) => ({
       backgroundColor: match ? theme.palette.secondary.main : "none",
-      width: "auto",
+      width: collapsed ? "min-content" : "auto",
       margin: "5px 8px",
       borderRadius: "4px",
     })

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -0,0 +1,59 @@
+import {
+  Box,
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  SxProps,
+  Typography,
+} from "@mui/material";
+import { Connector, StepIcon, StyledStepContent } from "./StepperComponents";
+
+interface StepperProps {
+  orientation: "vertical" | "horizontal";
+  activeStep: number;
+  steps: StepItem[];
+  containerSx: SxProps;
+}
+
+interface StepItem {
+  label: string;
+  description: string;
+}
+
+export const Stepper = ({
+  orientation,
+  steps,
+  activeStep = 0,
+  containerSx,
+}: StepperProps) => {
+  const isVertical = orientation === "vertical";
+
+  return (
+    <Box
+      sx={{
+        ...(isVertical ? { maxWidth: "300px" } : {}),
+        ...containerSx,
+      }}
+    >
+      <MuiStepper
+        activeStep={activeStep}
+        orientation={orientation}
+        alternativeLabel={!isVertical}
+        connector={<Connector isVertical={isVertical} />}
+      >
+        {steps?.map((item, index) => (
+          <Step key={index} expanded>
+            <StepLabel StepIconComponent={StepIcon}>{item?.label}</StepLabel>
+            <StyledStepContent
+              isVertical={isVertical}
+              activeStep={index < activeStep}
+              isLastStep={index === steps?.length - 1}
+            >
+              <Typography variant="label2">{item?.description}</Typography>
+            </StyledStepContent>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};