@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

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

@@ -1,39 +1,55 @@
-import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
-import { Treemap as ReTreeMap, Tooltip } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/shadcn-components/Charts/Chart';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import React from 'react';
+import { Treemap as ReTreeMap } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { Typography } from '../../export';
 import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 
-interface TreeMapProps {
+export interface TreeMapProps {
+  // Core data
+  data: any;
+  dataKey: string | number;
+  config: ChartConfig;
+
+  // Title & subtitle
   title?: string;
   showSubtitle?: boolean;
   subTitle?: string;
   titleProps?: TitleProps;
   subTitleProps?: SubTitleProps;
-  data: any;
-  dataKey: string | number;
+
+  // Dimensions
   width?: number;
   height?: number;
   margin?: MarginProps;
   aspectRatio?: number;
+
+  // Styling
   fill?: string;
   stroke?: string;
   colors?: string[];
+  className?: string;
+
+  // Features
   showToolTip?: boolean;
   isAnimationActive?: boolean;
   animationEasing?: AnimationTiming;
-  treeMapStyle?: SxProps;
-  containerSx?: any;
 }
 
-const TreeMap = ({
+const TreeMap: React.FC<TreeMapProps> = ({
   title = 'Tree Map',
-  titleProps = { variant: 'subtitle2' },
+  titleProps = { variant: 'large' },
   showSubtitle = false,
   subTitle = '',
-  subTitleProps = { variant: 'caption' },
+  subTitleProps = { variant: 'small' },
   data,
   dataKey,
+  config,
   width = 400,
   height = 200,
   aspectRatio,
@@ -43,50 +59,53 @@ const TreeMap = ({
   showToolTip = true,
   animationEasing = 'linear',
   isAnimationActive = false,
-  treeMapStyle,
-  containerSx,
-}: TreeMapProps) => {
+  className,
+}) => {
   return (
-    <Stack alignItems={'center'} sx={{ ...containerSx }}>
-      <Typography
-        variant={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
+    <div className={className}>
+      {title && (
         <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
+          variant={titleProps.variant || 'large'}
+          className={titleProps.className}
         >
           {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} />}
+      {showSubtitle && subTitle && (
+        <Typography
+          variant={subTitleProps.variant || 'small'}
+          className={subTitleProps.className}
+        >
+          {subTitle}
+        </Typography>
+      )}
+      <ChartContainer
+        config={config}
+        className="w-full"
+        style={{ height, width }}
       >
-        {showToolTip && <Tooltip content={CustomTooltip} />}
-      </ReTreeMap>
-    </Stack>
+        <ReTreeMap
+          data={data}
+          dataKey={dataKey}
+          width={width}
+          height={height}
+          aspectRatio={aspectRatio}
+          fill={fill}
+          stroke={stroke}
+          isAnimationActive={isAnimationActive}
+          animationEasing={animationEasing}
+          content={<CustomizedContent colors={colors} fill={fill} />}
+        >
+          {showToolTip && <ChartTooltip content={<ChartTooltipContent />} />}
+        </ReTreeMap>
+      </ChartContainer>
+    </div>
   );
 };
 
 export default TreeMap;
 
 const CustomizedContent = (props: any) => {
-  const theme = useTheme();
   const { depth, x, y, width, height, name, fill, stroke } = props;
 
   return (
@@ -108,7 +127,7 @@ const CustomizedContent = (props: any) => {
           x={x + width / 2}
           y={y + height / 2}
           textAnchor="middle"
-          fill={theme.palette.text.primary}
+          fill="hsl(var(--foreground))"
           fontSize={14}
           strokeOpacity={0}
         >
@@ -118,25 +137,3 @@ const CustomizedContent = (props: any) => {
     </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/export.ts

@@ -1,5 +1,5 @@
+export { type ChartConfig } from '@/shadcn-components/Charts/Chart';
 export * from './BarChart/BarChart';
 export * from './LineChart/LineChart';
 export * from './PieChart/PieChart';
-export * from './ProgressCard/ProgressCard';
 export * from './TreeMap/TreeMap';

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

@@ -1,4 +1,3 @@
-import { TypographyVariant as Variant } from '@mui/material/styles';
 import {
   HorizontalAlignmentType,
   IconType,
@@ -6,6 +5,21 @@ import {
 } from 'recharts/types/component/DefaultLegendContent';
 import { LayoutType } from 'recharts/types/util/types';
 
+// Shadcn Typography variants
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'p'
+  | 'blockquote'
+  | 'list'
+  | 'inlineCode'
+  | 'lead'
+  | 'large'
+  | 'small'
+  | 'muted';
+
 export type CartesianGridProps = {
   showCartesianGrid: boolean;
   size?: number;
@@ -17,13 +31,13 @@ export type AxisLabelProps = {
 };
 
 export type TitleProps = {
-  variant?: Variant;
-  sx?: any;
+  variant?: TypographyVariant;
+  className?: string;
 };
 
 export type SubTitleProps = {
-  variant?: Variant;
-  sx?: any;
+  variant?: TypographyVariant;
+  className?: string;
 };
 
 export type MarginProps = {

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

@@ -1,56 +1,85 @@
+import { cn } from '@/lib/utils';
 import {
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  AccordionProps as MuiAccordionProps,
-  Stack,
-  SxProps,
-} from '@mui/material';
-import { ReactNode } from 'react';
-import { Icons, Typography } from '../../export';
-import { StyledMuiAccordion } from './styles';
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Accordion as ShadcnAccordion,
+} from '@/shadcn-components/DataDisplay/Accordion/Accordion';
+import { ReactNode, useEffect, useState } from 'react';
+import { Typography } from '../Typography/Typography';
 
-export type AccordionProps = {
+export type AccordionItemProps = {
   title: ReactNode;
   content: ReactNode;
   actions?: ReactNode;
-  index?: number;
   errorKeys?: string[];
-  contentSx?: SxProps;
-  expanded?: boolean | number;
-} & Omit<
-  MuiAccordionProps,
-  'children' | 'content' | 'title' | 'index' | 'expanded' | 'actions'
->;
+  className?: string;
+  contentClassName?: string;
+};
+
+type AccordionProps = {
+  data: AccordionItemProps[];
+  className?: string;
+  defaultExpandedIndex?: number;
+  errorField?: string;
+};
+
+export const Accordion = ({
+  data,
+  className,
+  defaultExpandedIndex,
+  errorField,
+}: AccordionProps) => {
+  const defaultValue =
+    defaultExpandedIndex !== undefined ? String(defaultExpandedIndex) : '';
+  const [expandedValue, setExpandedValue] = useState<string>(defaultValue);
 
-export const Accordion = (props: AccordionProps) => {
-  const { index, expanded, title, content, actions, onChange, ...restProps } =
-    props;
+  useEffect(() => {
+    if (errorField) {
+      const errorIndex = data.findIndex((item) =>
+        Array.isArray(item.errorKeys)
+          ? item.errorKeys.includes(errorField)
+          : false,
+      );
+      if (errorIndex !== -1) {
+        setExpandedValue(String(errorIndex));
+      }
+    }
+  }, [errorField, data]);
 
   return (
-    <StyledMuiAccordion
-      key={index}
-      onChange={onChange}
-      expanded={typeof expanded == 'number' ? expanded === index : expanded}
-      {...restProps}
+    <ShadcnAccordion
+      type="single"
+      collapsible
+      value={expandedValue}
+      onValueChange={setExpandedValue}
+      className={cn('flex flex-col gap-1', className)}
     >
-      <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 sx={props.contentSx}>
-        {typeof content === 'string' ? (
-          <Typography variant="label1">{content}</Typography>
-        ) : (
-          content
-        )}
-      </AccordionDetails>
-    </StyledMuiAccordion>
+      {data?.map((item, index) => (
+        <AccordionItem
+          key={index}
+          value={String(index)}
+          className={cn('border rounded-md px-4 bg-background', item.className)}
+        >
+          <div className="flex items-center justify-between">
+            <AccordionTrigger className="hover:no-underline">
+              {typeof item.title === 'string' ? (
+                <Typography variant="small">{item.title}</Typography>
+              ) : (
+                item.title
+              )}
+            </AccordionTrigger>
+            {item.actions && <div className="ml-4">{item.actions}</div>}
+          </div>
+          <AccordionContent className={cn('pt-0 pb-4', item.contentClassName)}>
+            {typeof item.content === 'string' ? (
+              <Typography variant="small">{item.content}</Typography>
+            ) : (
+              item.content
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </ShadcnAccordion>
   );
 };

package/src/components/DataDisplay/ActivityLogView/ActivityLogFilter.tsx

@@ -0,0 +1,92 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/shadcn-components/Input/Popover/Popover';
+import { Filter } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../Input/Button/Button';
+import { DatePicker } from '../../Input/DatePicker/DatePicker';
+
+interface ActivityLogFilterProps {
+  fromDate: Date | null;
+  toDate: Date | null;
+  setFromDate: (date: Date | null) => void;
+  setToDate: (date: Date | null) => void;
+  fetchNextPage: () => void;
+  isLoading: boolean;
+}
+
+export const ActivityLogFilter = ({
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+  fetchNextPage,
+  isLoading,
+}: ActivityLogFilterProps) => {
+  const [localFromDate, setLocalFromDate] = useState(fromDate);
+  const [localToDate, setLocalToDate] = useState(toDate);
+  const [open, setOpen] = useState(false);
+
+  const handleFilterSubmit = () => {
+    setFromDate(localFromDate);
+    setToDate(localToDate);
+    fetchNextPage();
+    setOpen(false);
+  };
+
+  const clearFilters = () => {
+    setLocalFromDate(null);
+    setLocalToDate(null);
+    setFromDate(null);
+    setToDate(null);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="default"
+          size={'sm'}
+          startIcon={<Filter className="h-4 w-4" />}
+        >
+          Filter
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="end">
+        <div className="flex flex-col gap-4">
+          <DatePicker
+            key={`from-date-${localFromDate}`}
+            label="From Date"
+            value={localFromDate ?? undefined}
+            onChange={(value) => setLocalFromDate(value ?? null)}
+            disabled={isLoading}
+          />
+          <DatePicker
+            key={`to-date-${localToDate}`}
+            label="To Date"
+            value={localToDate ?? undefined}
+            onChange={(value) => setLocalToDate(value ?? null)}
+            disabled={isLoading}
+          />
+          <div className="border-t pt-4 flex gap-2">
+            <Button
+              onClick={handleFilterSubmit}
+              variant="default"
+              className="flex-1"
+              disabled={isLoading}
+            >
+              Apply
+            </Button>
+            <Button
+              onClick={clearFilters}
+              variant="outline"
+              className="flex-1"
+              disabled={isLoading}
+            >
+              Clear
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};