@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,158 +0,0 @@
-import { Stack, SxProps, useTheme } from '@mui/material';
-import {
-  CartesianGrid,
-  Label,
-  Legend,
-  Line,
-  LineChart as ReLineChart,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { CurveType } from 'recharts/types/shape/Curve';
-import { Typography } from '../../export';
-import {
-  AxisLabelProps,
-  BaseAxisProps,
-  CartesianGridProps,
-  LegendProps,
-  MarginProps,
-  SubTitleProps,
-  TitleProps,
-} from '../types/types';
-
-export type LineChartProps = {
-  title?: string;
-  showSubtitle?: boolean;
-  subTitle?: string;
-  titleProps?: TitleProps;
-  subTitleProps?: SubTitleProps;
-  width?: number;
-  height?: number;
-  dataKey: string;
-  data: any[];
-  lines: LineItem[];
-  showToolTip?: boolean;
-  showLegend?: boolean;
-  cartesianGrid?: CartesianGridProps;
-  axisLabelProps?: AxisLabelProps;
-  baseAxisProps?: BaseAxisProps;
-  legendSx?: LegendProps;
-  containerSx?: SxProps;
-  margin?: MarginProps;
-};
-
-type LineItem = {
-  type: CurveType;
-  dataKey: string;
-  stroke: string;
-  activeDot?: any;
-};
-
-export const LineChart = ({
-  title = 'Line Chart',
-  showSubtitle = false,
-  subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  titleProps = { variant: 'subtitle2' },
-  width = 700,
-  height = 500,
-  margin,
-  dataKey,
-  data,
-  lines,
-  showToolTip = true,
-  showLegend = true,
-  cartesianGrid = { showCartesianGrid: false },
-  axisLabelProps,
-  baseAxisProps,
-  legendSx,
-  containerSx,
-}: LineChartProps) => {
-  const { showCartesianGrid, size } = cartesianGrid;
-  const { xLabel, yLabel } = axisLabelProps ?? {};
-  const theme = useTheme();
-
-  return (
-    <Stack alignItems={'center'} sx={containerSx}>
-      <Typography
-        variant={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
-        <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
-        >
-          {title}
-        </Typography>
-      )}
-      <ReLineChart width={width} height={height} margin={margin} data={data}>
-        {showCartesianGrid && (
-          <CartesianGrid strokeDasharray={`${size} ${size}`} />
-        )}
-        {showToolTip && (
-          <Tooltip
-            itemStyle={{
-              color: theme.palette.text.secondary,
-            }}
-            contentStyle={{
-              color: theme.palette.text.primary,
-              backgroundColor: theme.palette.background.paper,
-              borderColor: theme.palette.border.primary,
-              borderRadius: '5px',
-              padding: '5px 10px',
-            }}
-          />
-        )}
-        {showLegend && <Legend {...legendSx} />}
-
-        <XAxis
-          padding={'gap'}
-          type="category"
-          dataKey={dataKey}
-          stroke={theme.palette.border.primary}
-          tick={{
-            fill: theme.palette.text.tertiary,
-            ...baseAxisProps?.xAxis?.tick,
-          }}
-          angle={baseAxisProps?.xAxis?.angle}
-          tickMargin={baseAxisProps?.xAxis?.tickMargin}
-        >
-          <Label
-            {...xLabel}
-            dy={xLabel?.dy}
-            style={{ fill: theme.palette.text.primary }}
-          />
-        </XAxis>
-        <YAxis
-          type="number"
-          stroke={theme.palette.border.primary}
-          tick={{
-            fill: theme.palette.text.tertiary,
-            ...baseAxisProps?.yAxis?.tick,
-          }}
-          tickMargin={baseAxisProps?.yAxis?.tickMargin}
-        >
-          {yLabel && (
-            <Label
-              offset={10}
-              position={'insideLeft'}
-              {...yLabel}
-              angle={yLabel.angle ?? -90}
-              dx={yLabel?.dx}
-              style={{ fill: theme.palette.text.primary }}
-            />
-          )}
-        </YAxis>
-        {lines?.map((item, index) => (
-          <Line key={index} {...item} />
-        ))}
-      </ReLineChart>
-    </Stack>
-  );
-};

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

@@ -1,121 +0,0 @@
-import { Stack, SxProps, useTheme } from '@mui/material';
-import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import {
-  LegendProps,
-  MarginProps,
-  SubTitleProps,
-  TitleProps,
-} from '../types/types';
-import { Typography } from '../../export';
-
-export type PieChartProps = {
-  title?: string;
-  showSubtitle?: boolean;
-  subTitle?: string;
-  titleProps?: TitleProps;
-  subTitleProps?: SubTitleProps;
-  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',
-  showSubtitle = false,
-  subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  titleProps = { variant: 'subtitle2' },
-  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={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
-        <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
-        >
-          {title}
-        </Typography>
-      )}
-      <RePieChart width={width} height={height} margin={margin}>
-        {showToolTip && (
-          <Tooltip
-            itemStyle={{
-              color: theme.palette.text.secondary,
-            }}
-            contentStyle={{
-              color: theme.palette.text.primary,
-              backgroundColor: theme.palette.background.paper,
-              borderColor: theme.palette.border.primary,
-              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

@@ -1,142 +0,0 @@
-import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
-import { Treemap as ReTreeMap, Tooltip } from 'recharts';
-import { AnimationTiming } from 'recharts/types/util/types';
-import { Typography } from '../../export';
-import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
-
-interface TreeMapProps {
-  title?: string;
-  showSubtitle?: boolean;
-  subTitle?: string;
-  titleProps?: TitleProps;
-  subTitleProps?: SubTitleProps;
-  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',
-  titleProps = { variant: 'subtitle2' },
-  showSubtitle = false,
-  subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  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={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
-        <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
-        >
-          {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} fill={fill} />}
-      >
-        {showToolTip && <Tooltip content={CustomTooltip} />}
-      </ReTreeMap>
-    </Stack>
-  );
-};
-
-export default TreeMap;
-
-const CustomizedContent = (props: any) => {
-  const theme = useTheme();
-  const { depth, x, y, width, height, name, fill, stroke } = props;
-
-  return (
-    <g {...props}>
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        style={{
-          fill: fill,
-          stroke: stroke,
-          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) => {
-  if (active && payload && payload.length) {
-    return (
-      <StyledContainer>
-        <Typography variant="body2">{`${payload[0].payload.name}`}</Typography>
-        <Typography variant="caption">
-          <span>{`${payload[0].value}`}</span>
-        </Typography>
-      </StyledContainer>
-    );
-  }
-
-  return null;
-};
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  borderColor: theme.palette.border.primary,
-  borderRadius: '5px',
-  padding: '5px 10px',
-}));

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

@@ -1,65 +0,0 @@
-import { Variant } from '@mui/material/styles/createTypography';
-
-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 TitleProps = {
-  variant?: Variant;
-  sx?: any;
-};
-
-export type SubTitleProps = {
-  variant?: Variant;
-  sx?: any;
-};
-
-export type MarginProps = {
-  top?: number;
-  right?: number;
-  bottom?: number;
-  left?: number;
-};
-
-export type LabelProps = {
-  value: string;
-  dx?: number;
-  dy?: number;
-  angle?: number;
-};
-
-export type BaseAxisProps = {
-  xAxis?: TickProps;
-  yAxis?: TickProps;
-};
-
-export type TickProps = {
-  angle?: number;
-  tickMargin?: number;
-  tick?: any;
-};
-
-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

@@ -1,54 +0,0 @@
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  AccordionProps as MuiAccordionProps,
-  Stack,
-} from '@mui/material';
-import { ReactNode } from 'react';
-import { Icons, Typography } from '../../export';
-import { StyledMuiAccordion } from './styles';
-
-export type AccordionProps = {
-  title: ReactNode;
-  content: ReactNode;
-  actions?: ReactNode;
-  index?: number;
-  errorKeys?: string[];
-  expanded?: boolean | number;
-} & Omit<
-  MuiAccordionProps,
-  'children' | 'content' | 'title' | 'index' | 'expanded' | 'actions'
->;
-
-export const Accordion = (props: AccordionProps) => {
-  const { index, expanded, title, content, actions, onChange, ...restProps } =
-    props;
-
-  return (
-    <StyledMuiAccordion
-      key={index}
-      onChange={onChange}
-      expanded={typeof expanded == 'number' ? expanded === index : expanded}
-      {...restProps}
-    >
-      <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <AccordionSummary expandIcon={<Icons.AccordionArrow />}>
-          {typeof title === 'string' ? (
-            <Typography variant="subtitle2">{title}</Typography>
-          ) : (
-            title
-          )}
-        </AccordionSummary>
-        <Box>{actions}</Box>
-      </Stack>
-      <AccordionDetails>
-        {typeof content === 'string' ? (
-          <Typography variant="label1">{content}</Typography>
-        ) : (
-          content
-        )}
-      </AccordionDetails>
-    </StyledMuiAccordion>
-  );
-};

package/src/components/DataDisplay/Accordion/styles.ts

@@ -1,10 +0,0 @@
-import { Accordion as MuiAccordion, styled } from '@mui/material';
-
-export const StyledMuiAccordion = styled(MuiAccordion)(() => ({
-  '&:before': {
-    display: 'none',
-  },
-  '&.Mui-expanded': {
-    margin: '0px',
-  },
-}));

package/src/components/DataDisplay/AccordionGroup/AccordionGroup.tsx

@@ -1,52 +0,0 @@
-import { SxProps } from '@mui/material';
-import { SyntheticEvent, useEffect, useState } from 'react';
-import { Accordion, AccordionProps } from '../Accordion/Accordion';
-import { StyledAccordionContainer } from './styles';
-
-type AccordionGroupProps = {
-  data: AccordionProps[];
-  containerSx?: SxProps;
-  defaultExpandedIndex?: number;
-  errorField?: string;
-};
-
-export const AccordionGroup = ({
-  data,
-  containerSx,
-  defaultExpandedIndex,
-  errorField,
-}: AccordionGroupProps) => {
-  const [expanded, setExpanded] = useState<number | false>(
-    defaultExpandedIndex ?? false,
-  );
-
-  useEffect(() => {
-    if (errorField) {
-      const errorIndex = data.findIndex((item) =>
-        Array.isArray(item.errorKeys)
-          ? item.errorKeys.includes(errorField)
-          : false,
-      );
-      if (errorIndex !== -1) setExpanded(errorIndex);
-    }
-  }, [errorField, data]);
-
-  const handleChange =
-    (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
-      setExpanded(isExpanded ? panel : false);
-    };
-
-  return (
-    <StyledAccordionContainer sx={{ ...containerSx }}>
-      {data?.map((itemProps, index) => (
-        <Accordion
-          elevation={0}
-          expanded={expanded}
-          {...itemProps}
-          index={index}
-          onChange={handleChange(index)}
-        />
-      ))}
-    </StyledAccordionContainer>
-  );
-};

package/src/components/DataDisplay/AccordionGroup/styles.ts

@@ -1,8 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-export const StyledAccordionContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: '4px',
-  flexDirection: 'column',
-  backgroundColor: theme.palette.surface.defaultBackground,
-}));