@campxdev/react-blueprint 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/esm/types/src/components/DataDisplay/DataTable/DataTable.d.ts

@@ -19,6 +19,9 @@ type DataTableProps<TData = any> = {
     rowSelectionModel?: Record<string, boolean>;
     onRowSelectionModelChange?: (newRowSelectionModel: Record<string, boolean>) => void;
     selectionActions?: React.ReactNode[];
+    onRowClick?: (params: {
+        row: Row<TData>;
+    }) => void;
     enableSorting?: boolean;
     sortingState?: SortingState;
     onSortingChange?: (newSortingState: SortingState) => void;

package/dist/esm/types/src/components/DataDisplay/DataTable/components/TableView.d.ts

@@ -15,6 +15,9 @@ interface TableViewProps<TData = any> {
     totalCount?: number;
     onPageChange?: (page: number) => void;
     onLimitChange?: (limit: number) => void;
+    onRowClick?: (params: {
+        row: Row<TData>;
+    }) => void;
 }
 declare const TableView: React.ForwardRefExoticComponent<TableViewProps<any> & React.RefAttributes<HTMLDivElement>>;
 export default TableView;

package/dist/esm/types/src/components/Input/PasswordField/PasswordField.d.ts

@@ -11,5 +11,6 @@ export type PasswordFieldProps = {
     error?: boolean;
     helperText?: string;
     className?: string;
+    fullWidth?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
-export declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, ...rest }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, fullWidth, ...rest }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Layout/PageHeader/PageHeader.d.ts

@@ -3,7 +3,8 @@ import { SearchBarProps } from '../../Input/SearchBar/SearchBar';
 interface PageHeaderProps {
     uniqueId?: string;
     pathTrimCount: number;
-    searchButtonProps?: SearchBarProps;
+    breadcrumbAction?: ReactElement;
+    searchBarProps?: SearchBarProps;
     filterButtonProps?: {
         label?: string;
         startIcon?: ReactNode;
@@ -19,5 +20,5 @@ interface PageHeaderProps {
         }) => ReactNode[]);
     };
 }
-declare const PageHeader: ({ uniqueId, pathTrimCount, searchButtonProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageHeader: ({ uniqueId, pathTrimCount, breadcrumbAction, searchBarProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { PageHeader, type PageHeaderProps };

package/dist/esm/types/src/components/Navigation/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,7 @@
+import { ReactElement } from 'react';
 export type BreadcrumbsProps = {
     pathTrimCount: number;
     containerClassName?: string;
+    action?: ReactElement;
 };
-export declare const Breadcrumbs: ({ pathTrimCount, containerClassName, }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumbs: ({ pathTrimCount, containerClassName, action, }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { LayoutType, AnimationTiming } from 'recharts/types/util/types';
 import { CurveType } from 'recharts/types/shape/Curve';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
-import { ColumnDef, SortingState, Row } from '@tanstack/react-table';
+import { ColumnDef, Row, SortingState } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
 import { Axios, AxiosInstance } from 'axios';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -488,6 +488,9 @@ type DataTableProps<TData = any> = {
     rowSelectionModel?: Record<string, boolean>;
     onRowSelectionModelChange?: (newRowSelectionModel: Record<string, boolean>) => void;
     selectionActions?: React__default.ReactNode[];
+    onRowClick?: (params: {
+        row: Row<TData>;
+    }) => void;
     enableSorting?: boolean;
     sortingState?: SortingState;
     onSortingChange?: (newSortingState: SortingState) => void;
@@ -613,7 +616,7 @@ declare const Tooltip: ({ children, title, placement, open, defaultOpen, onOpenC
 
 declare const buttonVariants: (props?: ({
     variant?: "input" | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
@@ -849,8 +852,9 @@ type PasswordFieldProps = {
     error?: boolean;
     helperText?: string;
     className?: string;
+    fullWidth?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
-declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, ...rest }: PasswordFieldProps) => react_jsx_runtime.JSX.Element;
+declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, fullWidth, ...rest }: PasswordFieldProps) => react_jsx_runtime.JSX.Element;
 
 type RadioGroupProps = {
     containerProps?: React.HTMLAttributes<HTMLDivElement>;
@@ -1139,7 +1143,8 @@ declare const PageContent: ({ children, className }: PageContentProps) => react_
 interface PageHeaderProps {
     uniqueId?: string;
     pathTrimCount: number;
-    searchButtonProps?: SearchBarProps;
+    breadcrumbAction?: ReactElement;
+    searchBarProps?: SearchBarProps;
     filterButtonProps?: {
         label?: string;
         startIcon?: ReactNode;
@@ -1155,13 +1160,14 @@ interface PageHeaderProps {
         }) => ReactNode[]);
     };
 }
-declare const PageHeader: ({ uniqueId, pathTrimCount, searchButtonProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const PageHeader: ({ uniqueId, pathTrimCount, breadcrumbAction, searchBarProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
 
 type BreadcrumbsProps = {
     pathTrimCount: number;
     containerClassName?: string;
+    action?: ReactElement;
 };
-declare const Breadcrumbs: ({ pathTrimCount, containerClassName, }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
+declare const Breadcrumbs: ({ pathTrimCount, containerClassName, action, }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string | number;

package/dist/styles.css

@@ -495,9 +495,6 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
-  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -632,6 +629,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -3106,11 +3107,6 @@
       margin-inline: calc(var(--spacing) * 0);
     }
   }
-  .md\:mt-2 {
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 2);
-    }
-  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -3658,11 +3654,6 @@
       border-bottom-right-radius: calc(var(--radius) - 2px);
     }
   }
-  .\[\&\:not\(\:first-child\)\]\:mt-6 {
-    &:not(:first-child) {
-      margin-top: calc(var(--spacing) * 6);
-    }
-  }
   .\[\&\:nth-child\(2\)\[data-selected\=true\]_button\]\:rounded-l-md {
     &:nth-child(2)[data-selected=true] button {
       border-top-left-radius: calc(var(--radius) - 2px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -51,6 +51,9 @@ type DataTableProps<TData = any> = {
   ) => void;
   selectionActions?: React.ReactNode[];
 
+  // Row click handler
+  onRowClick?: (params: { row: Row<TData> }) => void;
+
   // Sorting props
   enableSorting?: boolean;
   sortingState?: SortingState;
@@ -106,6 +109,7 @@ const DataTable = <TData extends Record<string, any> = any>(
     cellClassName,
     isLoading = false,
     columnVisibilityModel,
+    onRowClick,
   } = props;
 
   // Get layout mode and column visibility from Redux if tableActionProps is provided
@@ -290,6 +294,7 @@ const DataTable = <TData extends Record<string, any> = any>(
           totalCount={totalCount}
           onPageChange={onPageChange}
           onLimitChange={onLimitChange}
+          onRowClick={onRowClick}
         />
       )}
     </div>

package/src/components/DataDisplay/DataTable/components/TableView.tsx

@@ -29,6 +29,7 @@ interface TableViewProps<TData = any> {
   totalCount?: number;
   onPageChange?: (page: number) => void;
   onLimitChange?: (limit: number) => void;
+  onRowClick?: (params: { row: Row<TData> }) => void;
 }
 
 const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
@@ -48,6 +49,7 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
       totalCount,
       onPageChange,
       onLimitChange,
+      onRowClick,
     },
     ref,
   ) => {
@@ -131,14 +133,16 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                   className={rowHeightClass}
                 >
                   {/* Use visible header columns count to render correct number of skeleton cells */}
-                  {table.getHeaderGroups()[0]?.headers.map((_: any, cellIndex: number) => (
-                    <TableCell
-                      key={`skeleton-cell-${rowIndex}-${cellIndex}`}
-                      className={cn(cellIndex === 0 && 'pl-4', cellClassName)}
-                    >
-                      <Skeleton className="h-4 w-full" />
-                    </TableCell>
-                  ))}
+                  {table
+                    .getHeaderGroups()[0]
+                    ?.headers.map((_: any, cellIndex: number) => (
+                      <TableCell
+                        key={`skeleton-cell-${rowIndex}-${cellIndex}`}
+                        className={cn(cellIndex === 0 && 'pl-4', cellClassName)}
+                      >
+                        <Skeleton className="h-4 w-full" />
+                      </TableCell>
+                    ))}
                 </TableRow>
               ))
             ) : table.getRowModel().rows?.length ? (
@@ -153,6 +157,7 @@ const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
                     key={row.id}
                     data-state={row.getIsSelected() && 'selected'}
                     className={cn(rowHeightClass, customRowClassName)}
+                    onClick={() => onRowClick?.({ row })}
                   >
                     {row.getVisibleCells().map((cell: any, index: number) => (
                       <TableCell

package/src/components/DataDisplay/DataTable/components/ViewList/ViewButton.tsx

@@ -103,7 +103,7 @@ export const ViewButton = ({
         />
 
         <ConfirmDialog
-          message="Do you really want to delete the selected leads? This action cannot be undone."
+          message="Do you really want to delete this view? This action cannot be undone."
           isOpen={dialogOpen}
           onCancel={() => {
             setDialogOpen(false);

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -5,7 +5,7 @@ import {
   TriangleAlertIcon,
   XIcon,
 } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../Input/Button/Button';
 
@@ -33,12 +33,9 @@ export const Snackbar = ({
   anchorOrigin,
   autoHideDuration,
 }: SnackbarProps) => {
-  const [visible, setVisible] = useState(open);
-
   useEffect(() => {
     if (open && autoHideDuration) {
       const timer = setTimeout(() => {
-        setVisible(false);
         if (onClose) {
           onClose('timeout');
         }
@@ -61,13 +58,12 @@ export const Snackbar = ({
   };
 
   const handleClose = () => {
-    setVisible(false);
     if (onClose) {
       onClose('clickaway');
     }
   };
 
-  if (!visible) return null;
+  if (!open) return null;
 
   const vertical = anchorOrigin?.vertical || 'top';
   const horizontal = anchorOrigin?.horizontal || 'center';
@@ -83,12 +79,13 @@ export const Snackbar = ({
 
   return (
     <div
-      className={`fixed ${positionClasses} z-[9999] pointer-events-auto`}
+      className={`fixed ${positionClasses} z-[9999] pointer-events-auto w-fit max-w-lg`}
       role="alert"
       aria-live="polite"
     >
       <div
-        className={`group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all`}
+        className={`group pointer-events-auto relative flex bg-background items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all`}
+        style={{ minWidth: '350px' }}
         data-sonner-toast=""
       >
         <div className="flex items-start gap-3 flex-1">

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -18,6 +18,7 @@ export type PasswordFieldProps = {
   error?: boolean;
   helperText?: string;
   className?: string;
+  fullWidth?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
 export const PasswordField = ({
@@ -33,6 +34,7 @@ export const PasswordField = ({
   error = false,
   helperText,
   className,
+  fullWidth,
   ...rest
 }: PasswordFieldProps) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -42,8 +44,8 @@ export const PasswordField = ({
   };
 
   const content = (
-    <div className="flex flex-col gap-2">
-      <div className="relative">
+    <div className={cn('flex flex-col gap-2', fullWidth && 'w-full')}>
+      <div className={cn('relative', fullWidth && 'w-full')}>
         <Input
           id={name}
           name={name}
@@ -53,6 +55,7 @@ export const PasswordField = ({
           placeholder={placeholder}
           disabled={disabled}
           className={cn(
+            fullWidth && 'w-full',
             'pr-10 bg-input-background border-none ',
             error && 'border-destructive focus-visible:ring-destructive',
             className,

package/src/components/Layout/AppLayout/components/Sidebar/MenuBar.tsx

@@ -54,6 +54,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({
           variants={containerVariants}
           initial="hidden"
           animate="visible"
+          className="flex flex-col gap-1"
         >
           {currentMenuState.menu.map((item, index) => (
             <MenuItem

package/src/components/Layout/AppLayout/components/Sidebar/MenuItem.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
 import { cn } from '@/lib/utils';
-import { Minus, Plus, Undo2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Undo2 } from 'lucide-react';
 import { Typography } from '../../../../DataDisplay/Typography/Typography';
 import { Tooltip } from '../../../../Feedback/Tooltip/Tooltip';
 import { MenuItemProps } from './interfaces';
@@ -113,7 +113,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   if (subMenu && subMenu.length > 0) {
     const content = (
       <>
-        <MenuItemContainer>
+        <MenuItemContainer style={{ marginBottom: 1 }}>
           <SubMenuContainer
             match={!!match}
             onClick={handleSubMenuToggle}
@@ -135,7 +135,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                     <Typography variant={'small'}>{name}</Typography>
                   </div>
                   <div className="flex flex-col">
-                    {expanded ? <Minus /> : <Plus />}
+                    {expanded ? <ChevronUp /> : <ChevronDown />}
                   </div>
                 </div>
               )}

package/src/components/Layout/AppLayout/components/Sidebar/StyledComponents.tsx

@@ -198,7 +198,7 @@ export const SubMenuItemContainer: React.FC<BaseProps> = ({
   return (
     <div
       className={cn(
-        'flex flex-col ml-6 border-l-2 border-border/10',
+        'flex flex-col gap-1 ml-6 border-l-2 border-border/10',
         className,
       )}
       {...props}

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -17,7 +17,8 @@ import { PageHeaderSearchBar } from './components/SearchBar';
 interface PageHeaderProps {
   uniqueId?: string;
   pathTrimCount: number;
-  searchButtonProps?: SearchBarProps;
+  breadcrumbAction?: ReactElement;
+  searchBarProps?: SearchBarProps;
   filterButtonProps?: {
     label?: string;
     startIcon?: ReactNode;
@@ -35,7 +36,8 @@ interface PageHeaderProps {
 const PageHeader = ({
   uniqueId,
   pathTrimCount,
-  searchButtonProps,
+  breadcrumbAction,
+  searchBarProps,
   filterButtonProps,
   addButtonProps,
   actionProps,
@@ -44,7 +46,7 @@ const PageHeader = ({
   const dispatch = useDispatch();
 
   const showActionBar =
-    searchButtonProps || filterButtonProps || addButtonProps || actionProps;
+    searchBarProps || filterButtonProps || addButtonProps || actionProps;
 
   const wrapProps = (element: ReactElement): ReactElement => {
     const { name } = element.props;
@@ -66,19 +68,19 @@ const PageHeader = ({
 
   return (
     <div>
-      <Breadcrumbs pathTrimCount={pathTrimCount} />
+      <Breadcrumbs pathTrimCount={pathTrimCount} action={breadcrumbAction} />
       <div
         className={cn(
           'flex flex-col md:flex-row gap-1 md:gap-2  items-center  w-full px-1 pb-2 md:p-0 border-b',
           showActionBar ? '' : 'hidden',
         )}
       >
-        {searchButtonProps && (
+        {searchBarProps && (
           <PageHeaderSearchBar
             className="w-full"
             containerClassName="w-full md:w-md"
             uniqueId={uniqueId}
-            {...searchButtonProps}
+            {...searchBarProps}
           />
         )}
         <div className="flex gap-2 items-center w-full px-2 md:p-0">

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

@@ -18,17 +18,20 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/shadcn-components/Navigation/DropdownMenu/DropdownMenu';
+import { ReactElement } from 'react';
 import { getBreadcrumbsCharacter } from '../../../utils/export';
 import { MenuToggleButton } from '../../Layout/AppLayout/components/MenuToggleButton';
 
 export type BreadcrumbsProps = {
   pathTrimCount: number;
   containerClassName?: string;
+  action?: ReactElement;
 };
 
 export const Breadcrumbs = ({
   pathTrimCount,
   containerClassName,
+  action,
 }: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
   const currentPathArray = window.location.pathname.split('/');
@@ -87,7 +90,7 @@ export const Breadcrumbs = ({
           <BreadcrumbItem>
             <DropdownMenu>
               <DropdownMenuTrigger className="flex items-center gap-1">
-                <BreadcrumbEllipsis />
+                <BreadcrumbEllipsis className="size-5" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
                 {middleItems.map((item, index) => (
@@ -112,14 +115,22 @@ export const Breadcrumbs = ({
   return (
     <div
       className={cn(
-        'flex w-full flex-row items-center px-2 pt-2 gap-1 md:px-3',
+        'flex w-full flex-row items-center justify-between px-2 pt-2 gap-1 md:px-3',
         containerClassName,
       )}
     >
-      <MenuToggleButton />
-      <Breadcrumb>
-        <BreadcrumbList>{renderBreadcrumbs()}</BreadcrumbList>
-      </Breadcrumb>
+      <div
+        className={cn(
+          'flex w-full flex-row items-center gap-1',
+          containerClassName,
+        )}
+      >
+        <MenuToggleButton />
+        <Breadcrumb>
+          <BreadcrumbList>{renderBreadcrumbs()}</BreadcrumbList>
+        </Breadcrumb>
+      </div>
+      {action}
     </div>
   );
 };

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -55,7 +55,7 @@ export const TabsContainer = ({
     <Tabs
       value={currentTab}
       onValueChange={handleTabsChange}
-      className={cn('mt-0 md:mt-2', className)}
+      className={className}
     >
       <TabsList className={cn(tabsListClassName)} style={{ margin: '4px 8px' }}>
         {tabs.map(({ key, label, highlight, disabled, icon }) => (

package/src/hooks/usePageHeader.ts

@@ -6,9 +6,9 @@ import {
   PageHeaderSingleState,
   resetStateForUniqueId,
   setDefaultFiltersForUniqueId,
+  setLayoutModeForUniqueId,
   setLimitForUniqueId,
   setOffsetForUniqueId,
-  setLayoutModeForUniqueId,
 } from '../redux/slices/pageHeaderSlice';
 import { RootState } from '../redux/store';
 

package/src/shadcn-components/DataDisplay/Typography/Typography.tsx

@@ -12,7 +12,7 @@ const typographyVariants = cva('', {
       h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
 
       // Paragraphs
-      p: 'leading-7 [&:not(:first-child)]:mt-6',
+      p: 'leading-7',
 
       // Quote
       blockquote: 'mt-6 border-l-2 pl-6 italic',