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

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

@@ -1,186 +1,124 @@
-import { ChevronRight, MoreHoriz } from '@mui/icons-material';
-
-import {
-  CardContent,
-  Card as MuiCard,
-  Stack,
-  SxProps,
-  Typography,
-} from '@mui/material';
-import { TypographyVariant as Variant } from '@mui/material/styles';
-import { ReactNode } from 'react';
-import { DropDownIcon } from '../../Navigation/DropDownMenu/DropDownIcon';
-import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
 import {
-  StyledButton,
-  StyledCardActions,
-  StyledDivider,
-  StyledHeader,
-  StyledIcon,
-  StyledImage,
-  StyledStatusText,
-} from './styles';
-
-export interface CardProps {
-  title: string;
-  caption?: string;
-  children?: ReactNode;
-  footer?: {
-    buttonText?: string | ReactNode;
-    onClick: () => void;
-    endIcon?: ReactNode;
-    buttonProps?: any;
-  };
-  fields?: {
-    title: string;
-    value: ReactNode | string;
-  }[];
-  titleProps?: {
-    variant: Variant;
-    sx?: SxProps;
-  };
-  captionProps?: {
-    variant: Variant;
-    sx?: SxProps;
-  };
-  status?: string;
-  imageSrc?: string;
-  titleImgIcon?: ReactNode;
-  checkBox?: boolean;
+  Card as ShadcnCard,
+  CardAction as ShadcnCardAction,
+  CardContent as ShadcnCardContent,
+  CardDescription as ShadcnCardDescription,
+  CardFooter as ShadcnCardFooter,
+  CardHeader as ShadcnCardHeader,
+  CardTitle as ShadcnCardTitle,
+} from '@/shadcn-components/DataDisplay/Card/Card';
+import * as React from 'react';
 
-  moreOptions?: boolean;
-  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
-  icon?: ReactNode;
-  headerSx?: SxProps;
-  statusSx?: SxProps;
-  cardSx?: SxProps;
+export interface CardProps
+  extends Omit<React.ComponentProps<typeof ShadcnCard>, 'title' | 'content'> {
+  /**
+   * Card title - displayed in the header
+   */
+  title?: React.ReactNode;
+  /**
+   * Card description - displayed below the title in the header
+   */
+  description?: React.ReactNode;
+  /**
+   * Action buttons or elements - displayed in the top-right of the header
+   */
+  actions?: React.ReactNode;
+  /**
+   * Main card content
+   */
+  content?: React.ReactNode;
+  /**
+   * Footer content - displayed at the bottom of the card
+   */
+  footer?: React.ReactNode;
+  /**
+   * Children - if provided, will override the structured layout and give full control
+   */
+  children?: React.ReactNode;
 }
 
-export const Card = ({
-  title,
-  titleImgIcon,
-  caption,
-  status,
-  footer,
-  fields,
-  imageSrc,
+/**
+ * Card component built on shadcn/ui Card
+ *
+ * @example
+ * // Simple card with all props
+ * <Card
+ *   title="Card Title"
+ *   description="This is a description"
+ *   actions={<Button>Action</Button>}
+ *   content={<p>Main content goes here</p>}
+ *   footer={<Button variant="outline">Footer Action</Button>}
+ * />
+ *
+ * @example
+ * // Custom layout using composition
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Custom Title</CardTitle>
+ *     <CardDescription>Custom Description</CardDescription>
+ *     <CardAction>
+ *       <Button>Action</Button>
+ *     </CardAction>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Custom content layout
+ *   </CardContent>
+ *   <CardFooter>
+ *     Custom footer
+ *   </CardFooter>
+ * </Card>
+ */
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      title,
+      description,
+      actions,
+      content,
+      footer,
+      children,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // If children are provided, use them directly for full control
+    if (children) {
+      return (
+        <ShadcnCard ref={ref} className={className} {...props}>
+          {children}
+        </ShadcnCard>
+      );
+    }
 
-  statusSx,
-  cardSx,
-  headerSx,
-  moreOptions,
-  titleProps = {
-    variant: 'subtitle2',
-  },
-  captionProps = {
-    variant: 'caption',
-  },
-  icon,
-  children,
-  menu = [],
-}: CardProps) => {
-  const handleClick = (e: any) => {
-    footer?.onClick();
-  };
+    // Otherwise, use the structured layout with props
+    const hasHeader = title || description || actions;
 
-  return (
-    <MuiCard
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        ...cardSx,
-      }}
-    >
-      <Stack>
-        {children}
-        {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
-        <StyledHeader sx={headerSx}>
-          <Stack gap={'8px'} flexDirection={'row'} alignItems={'center'}>
-            {/* check box onclick functionality need to add */}
-            {/* {checkBox && (
-            <StyledStack>
-              <Checkbox />
-            </StyledStack>
-          )} */}
-
-            {titleImgIcon && titleImgIcon}
-
-            <Stack justifyContent={'center'}>
-              <Typography variant={titleProps.variant} sx={titleProps.sx}>
-                {title}
-              </Typography>
-              <Typography variant={captionProps.variant} sx={captionProps.sx}>
-                {caption}
-              </Typography>
-            </Stack>
-          </Stack>
-          <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
-            {status && (
-              <StyledStatusText variant="label2" sx={statusSx}>
-                {status}{' '}
-              </StyledStatusText>
+    return (
+      <ShadcnCard ref={ref} className={className} {...props}>
+        {hasHeader && (
+          <ShadcnCardHeader>
+            {title && <ShadcnCardTitle>{title}</ShadcnCardTitle>}
+            {description && (
+              <ShadcnCardDescription>{description}</ShadcnCardDescription>
             )}
-            {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>
-                    {typeof field.value == 'string' ? (
-                      <Typography variant="body2">{field.value}</Typography>
-                    ) : (
-                      field.value
-                    )}
-                  </Stack>
-                </Stack>
-              ))}
-            </Stack>
-          </CardContent>
+            {actions && <ShadcnCardAction>{actions}</ShadcnCardAction>}
+          </ShadcnCardHeader>
         )}
-      </Stack>
+        {content && <ShadcnCardContent>{content}</ShadcnCardContent>}
+        {footer && <ShadcnCardFooter>{footer}</ShadcnCardFooter>}
+      </ShadcnCard>
+    );
+  },
+);
 
-      {footer && (
-        <StyledCardActions>
-          <StyledButton
-            variant="text"
-            onClick={handleClick}
-            {...footer.buttonProps}
-            endIcon={footer?.endIcon ?? <ChevronRight />}
-          >
-            {footer?.buttonText ?? 'View'}
-          </StyledButton>
-        </StyledCardActions>
-      )}
-    </MuiCard>
-  );
+export {
+  Card,
+  ShadcnCardAction as CardAction,
+  ShadcnCardContent as CardContent,
+  ShadcnCardDescription as CardDescription,
+  ShadcnCardFooter as CardFooter,
+  ShadcnCardHeader as CardHeader,
+  ShadcnCard as CardRoot,
+  ShadcnCardTitle as CardTitle,
 };

package/src/components/DataDisplay/Chip/Chip.tsx

@@ -0,0 +1,12 @@
+import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
+import * as React from 'react';
+
+export interface ChipProps extends React.ComponentPropsWithoutRef<typeof Badge> {
+  label: string;
+}
+
+export const Chip = ({ label, ...rest }: ChipProps) => {
+  return <Badge {...rest}>{label}</Badge>;
+};
+
+export default Chip;

package/src/components/DataDisplay/Chips/Chips.tsx

@@ -1,4 +1,5 @@
-import { Chip, Stack, styled } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
 import { ReactNode, useEffect, useState } from 'react';
 
 interface ChipsProps {
@@ -62,30 +63,22 @@ export const Chips = ({
         selected.map((item) => item.toString()).includes(value.toString());
 
   return (
-    <Stack gap="8px" direction={direction} flexWrap="wrap">
+    <div
+      className={cn(
+        'flex flex-wrap gap-2',
+        direction === 'column' && 'flex-col',
+      )}
+    >
       {list.map((item, index) => (
-        <StyledChip
+        <Badge
           key={index}
-          color="primary"
-          label={item.label}
-          clickable
-          variant={isSelected(item.value) ? 'outlined' : 'filled'}
+          variant={isSelected(item.value) ? 'default' : 'secondary'}
           onClick={() => handleChange(item.value)}
-        />
+          className="hover:cursor-pointer"
+        >
+          {item.label}
+        </Badge>
       ))}
-    </Stack>
+    </div>
   );
 };
-
-const StyledChip = styled(Chip)(({ theme }) => ({
-  minWidth: '100px',
-  color: theme.palette.text.primary,
-  background: theme.palette.surface.grey,
-  '&.MuiButtonBase-root.MuiChip-filled': {
-    borderColor: theme.palette.primary.main,
-  },
-  height: '40px',
-  fontSize: '14px',
-  fontWeight: 500,
-  borderRadius: '20px',
-}));