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

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
-import * as React from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
@@ -39,6 +39,7 @@ export type DatePickerProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
+  fullWidth?: boolean;
   [key: string]: any;
 };
 
@@ -66,10 +67,12 @@ export const DatePicker = ({
   className,
   onOpen,
   onClose,
+  fullWidth,
   ...rest
 }: DatePickerProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [date, setDate] = React.useState<Date | undefined>(value);
+  const [open, setOpen] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(value);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
 
   const formatDateString = (date: Date | undefined) => {
     if (!date) return '';
@@ -90,32 +93,46 @@ export const DatePicker = ({
     }
   };
 
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   return (
     <LabelWrapper
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       <Popover open={open} onOpenChange={handleOpenChange}>
         <PopoverTrigger asChild>
-          <Button
-            variant="input"
-            className={cn(
-              'w-full justify-between text-left font-normal',
-              // !date && 'text-muted-foreground',
-              error && 'border-destructive',
-              className,
-            )}
-            disabled={disabled}
-            {...rest}
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
           >
-            <span>{date ? formatDateString(date) : placeholder}</span>
-            {Icon &&
-              React.cloneElement(Icon as React.ReactElement, {
-                className: 'ml-2 h-4 w-4',
-              })}
-          </Button>
+            <Button
+              variant="input"
+              className={cn(
+                'justify-between text-left font-normal',
+                !date && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>{date ? formatDateString(date) : placeholder}</span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4',
+                })}
+            </Button>
+          </span>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col">
@@ -199,7 +216,7 @@ export const DatePicker = ({
           variant="small"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
-import * as React from 'react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
@@ -68,6 +68,7 @@ export type DateTimePickerProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
+  fullWidth?: boolean;
   [key: string]: any;
 };
 
@@ -96,14 +97,16 @@ export const DateTimePicker = ({
   className,
   onOpen,
   onClose,
+  fullWidth,
   ...rest
 }: DateTimePickerProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [dateTime, setDateTime] = React.useState<Date | undefined>(value);
-  const [timeValue, setTimeValue] = React.useState<string>('');
+  const [open, setOpen] = useState(false);
+  const [dateTime, setDateTime] = useState<Date | undefined>(value);
+  const [timeValue, setTimeValue] = useState<string>('');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
 
   // Determine view configurations based on views prop
-  const viewConfig = React.useMemo(() => {
+  const viewConfig = useMemo(() => {
     const hasTime =
       views.includes('hours') ||
       views.includes('minutes') ||
@@ -120,7 +123,7 @@ export const DateTimePicker = ({
   }, [views]);
 
   // Update time value when dateTime changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (dateTime && viewConfig.showTime) {
       const hours = dateTime.getHours(),
         minutes = dateTime.getMinutes(),
@@ -184,6 +187,11 @@ export const DateTimePicker = ({
     }
   };
 
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   // If only time selection (no date), render native time input directly
   if (viewConfig.showTime && !viewConfig.showDate) {
     return (
@@ -214,7 +222,7 @@ export const DateTimePicker = ({
             variant="small"
             className={cn('ml-1 mt-1', error && 'text-destructive')}
           >
-            {error || helperText}
+            {typeof error === 'string' ? error : error?.message || helperText}
           </Typography>
         )}
       </LabelWrapper>
@@ -226,29 +234,38 @@ export const DateTimePicker = ({
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       <Popover open={open} onOpenChange={handleOpenChange}>
         <PopoverTrigger asChild>
-          <Button
-            variant="input"
-            className={cn(
-              'w-full justify-between text-left font-normal',
-              !dateTime && 'text-muted-foreground',
-              error && 'border-destructive',
-              className,
-            )}
-            disabled={disabled}
-            {...rest}
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
           >
-            <span>
-              {dateTime ? formatDateTimeString(dateTime) : placeholder}
-            </span>
-            {Icon &&
-              React.cloneElement(Icon as React.ReactElement, {
-                className: 'ml-2 h-4 w-4 ',
-              })}
-          </Button>
+            <Button
+              variant="input"
+              className={cn(
+                'w-full justify-between text-left font-normal',
+                !dateTime && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>
+                {dateTime ? formatDateTimeString(dateTime) : placeholder}
+              </span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4 ',
+                })}
+            </Button>
+          </span>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col">
@@ -334,7 +351,7 @@ export const DateTimePicker = ({
           variant="small"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/MultiSelect/components/MultiSelectInput.tsx

@@ -232,7 +232,7 @@ export const MultiSelectInput = ({
           variant="muted"
           className={cn('text-xs', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

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/Input/SingleSelect/components/SingleInput.tsx

@@ -198,7 +198,7 @@ export const SingleInput = ({
           variant="muted"
           className={cn('text-xs', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/TextField/TextField.tsx

@@ -11,6 +11,7 @@ export type TextFieldProps = {
   required?: boolean;
   fullWidth?: boolean;
   error?: boolean;
+  helperText?: React.ReactNode;
 } & React.ComponentProps<typeof Input>;
 
 export const TextField = ({
@@ -24,6 +25,7 @@ export const TextField = ({
   fullWidth,
   className,
   error = false,
+  helperText,
   ...rest
 }: TextFieldProps) => {
   return (
@@ -50,6 +52,11 @@ export const TextField = ({
         aria-invalid={error}
         {...rest}
       />
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
       {description && (
         <Typography variant="muted" className={cn(error && 'text-destructive')}>
           {description}

package/src/components/Input/Textarea/Textarea.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Textarea as ShadcnTextarea } from '@/shadcn-components/Input/Textarea/Textarea';
+import * as React from 'react';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+export type TextareaProps = {
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  description?: string;
+  label?: React.ReactNode | string;
+  required?: boolean;
+  fullWidth?: boolean;
+  error?: boolean;
+  helperText?: React.ReactNode;
+} & React.ComponentProps<typeof ShadcnTextarea>;
+
+export const Textarea = ({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  description,
+  fullWidth,
+  className,
+  error = false,
+  helperText,
+  ...rest
+}: TextareaProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <ShadcnTextarea
+        id={name}
+        value={value}
+        name={name}
+        onChange={onChange}
+        className={cn(
+          fullWidth && 'w-full',
+          'bg-input-background border-none placeholder:text-muted-foreground',
+          className,
+        )}
+        required={required}
+        aria-invalid={error}
+        {...rest}
+      />
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {description}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};

package/src/components/Input/export.ts

@@ -17,4 +17,5 @@ export * from './Select/Select';
 export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
+export * from './Textarea/Textarea';
 export * from './TextField/TextField';

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';
@@ -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 ? <ChevronDown /> : <ChevronUp />}
                   </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/AppLayout/index.ts

@@ -10,3 +10,6 @@ export { MenuToggleButton } from './components/MenuToggleButton';
 
 // Reusable popup components for AppLayout right section
 export { UserProfilePopup } from './components/UserProfilePopup';
+
+// Sidebar interfaces
+export * from './components/Sidebar/interfaces';

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 md:px-3',
+          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',

package/src/shadcn-components/Input/Textarea/Textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };