@campxdev/react-blueprint 1.7.10 → 1.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/App.tsx

@@ -1,7 +1,8 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Button } from '@mui/material';
+import { useForm } from 'react-hook-form';
+
 import './App.css';
-import { ActivityLogView } from './components/export';
+import { FileUpload, FormControlWrapper } from './components/export';
 
 interface RowType {
   lastName: string;
@@ -10,82 +11,25 @@ interface RowType {
 }
 
 function App() {
+  const { control, watch, handleSubmit } = useForm({});
+
+  const onSubmit = (formData: any) => {
+    console.log(formData);
+  };
+
   return (
     <div
       style={{
         display: 'flex',
         justifyContent: 'flex-start',
         paddingLeft: '16px',
+        flexDirection: 'column',
       }}
     >
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <ActivityLogView
-          activitiesData={[
-            {
-              userName: 'ss',
-              action: 'create',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'delete',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-            {
-              userName: 'ss',
-              action: 'update',
-              message: 's',
-              timestamp: new Date().toISOString(),
-            },
-          ]}
-          isFetchingNextPage={false}
-          fetchNextPage={function (): void {
-            // throw new Error('Function not implemented.');
-          }}
-          hasNextPage={undefined}
-          fromDate={null}
-          toDate={null}
-          setFromDate={function (date: Date | null): void {
-            // throw new Error('Function not implemented.');
-          }}
-          setToDate={function (date: Date | null): void {
-            // throw new Error('Function not implemented.');
-          }}
-          isLoading={false}
-        />
-      </LocalizationProvider>
+      <FormControlWrapper control={control}>
+        <FileUpload label={'Files'} name="daaku" files={watch().daaku} />
+      </FormControlWrapper>
+      <Button onClick={handleSubmit(onSubmit)}>Submit</Button>
     </div>
   );
 }

package/src/components/Assets/Icons/IconComponents/ThreeDotsMenuIcon.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from '@mui/material';
+
+export const ThreeDotsMenuIcon = ({
+  size = 16,
+  color,
+  backgroundColor,
+}: {
+  size?: number;
+  color?: string;
+  backgroundColor?: string;
+}) => {
+  const theme = useTheme();
+  const fill = color ?? theme.palette.primary.main;
+  const background = backgroundColor || theme.palette.secondary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_462_9729)">
+        <rect width="24" height="24" rx="4" fill={background} />
+        <path
+          d="M16 11.9999C16 12.8836 16.7163 13.5999 17.6 13.5999C18.4836 13.5999 19.2 12.8836 19.2 11.9999C19.2 11.1162 18.4836 10.3999 17.6 10.3999C16.7163 10.3999 16 11.1162 16 11.9999Z"
+          fill={fill}
+        />
+        <path
+          d="M10.4 11.9999C10.4 12.8836 11.1163 13.5999 12 13.5999C12.8836 13.5999 13.6 12.8836 13.6 11.9999C13.6 11.1162 12.8836 10.3999 12 10.3999C11.1163 10.3999 10.4 11.1162 10.4 11.9999Z"
+          fill={fill}
+        />
+        <path
+          d="M4.8 11.9999C4.8 12.8836 5.51634 13.5999 6.4 13.5999C7.28366 13.5999 8 12.8836 8 11.9999C8 11.1162 7.28366 10.3999 6.4 10.3999C5.51634 10.3999 4.8 11.1162 4.8 11.9999Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_462_9729">
+          <rect width="24" height="24" rx="4" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -110,6 +110,7 @@ import { StudentsIcon } from './IconComponents/StudentsIcon';
 import { SuccessFilledIcon } from './IconComponents/SuccessFilledIcon';
 import { TasksIcon } from './IconComponents/TasksIcon';
 import { TextLocalIcon } from './IconComponents/TextLocalIcon';
+import { ThreeDotsMenuIcon } from './IconComponents/ThreeDotsMenuIcon';
 import { TicketSystemIcon } from './IconComponents/TicketingSystemIcon';
 import { TicketsIcon } from './IconComponents/TicketsIcon';
 import { TimeTableIcon } from './IconComponents/TimeTableIcon';
@@ -133,6 +134,7 @@ export const Icons = {
   RedoIcon,
   WhatsappIcon,
   AssignmentIcon,
+  ThreeDotsMenuIcon,
   ReportIssueIcon,
   SmsIcon,
   EmailIcon,

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

@@ -24,7 +24,7 @@ export const StyledButton = styled(Button)(({ theme }) => ({
 
 export const StyledImage = styled('img')(({ theme }) => ({
   height: '216px',
-  width: '385px',
+  width: '400px',
   objectFit: 'cover',
 }));
 

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

@@ -0,0 +1,95 @@
+import { StackProps } from '@mui/material';
+import {
+  DateTimePicker as MuiDateTimePicker,
+  DateTimePickerProps as MuiDateTimePickerProps,
+  PickersShortcutsItem,
+  PickerValidDate,
+} from '@mui/x-date-pickers';
+import { format as DateFnsFormat } from 'date-fns';
+
+import { Icons } from '../../export';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+type DateTimePickerProps<
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+> = {
+  format?:
+    | 'yyyy'
+    | 'MMMM yyyy'
+    | 'MMM yyyy'
+    | 'dd MMMM yyyy'
+    | 'dd/MM/yyyy'
+    | 'MM/dd/yyyy'
+    | 'yyyy-MM-dd'
+    | 'yyyy-MM-dd hh:mm a'
+    | 'yyyy-MM-dd HH:mm'
+    | 'dd MMM yyyy HH:mm'
+    | 'dd MMM yyyy hh:mm a'
+    | 'dd/MM/yyyy hh:mm a'
+    | 'dd/MM/yyyy HH:mm'
+    | 'hh:mm a'
+    | 'HH:mm'
+    | 'hh:mm:ss a'
+    | 'HH:mm:ss'
+    | 'MMM dd, yyyy hh:mm a'
+    | 'MMMM dd, yyyy HH:mm'
+    | 'EEE, MMM dd yyyy'
+    | 'EEEE, MMMM dd, yyyy';
+  views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
+  helperText?: string;
+  placeholder?: string;
+  shortcutsItems?: PickersShortcutsItem<any>[];
+  required?: boolean;
+  containerProps?: StackProps;
+  openPickerIcon?: React.ElementType;
+} & MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
+
+export const DateTimePicker = <
+  TDate extends PickerValidDate,
+  TEnableAccessibleFieldDOMStructure extends boolean = false,
+>({
+  label,
+  name,
+  required = false,
+  format = 'dd MMM yyyy hh:mm a',
+  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
+  helperText,
+  placeholder = '',
+  shortcutsItems = [],
+  openPickerIcon: Icon = Icons.NoteIcon,
+  containerProps,
+  value,
+  ...rest
+}: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <MuiDateTimePicker
+        format={format}
+        views={views}
+        defaultValue={value}
+        slotProps={{
+          textField: {
+            helperText,
+            placeholder,
+          },
+          shortcuts: {
+            items: shortcutsItems,
+          },
+        }}
+        slots={{
+          openPickerIcon: Icon,
+        }}
+        dayOfWeekFormatter={(day: any) => {
+          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
+        }}
+        {...rest}
+      />
+    </LabelWrapper>
+  );
+};

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -0,0 +1,215 @@
+import {
+  Box,
+  FormLabel,
+  Stack,
+  styled,
+  SxProps,
+  useTheme,
+} from '@mui/material';
+import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
+
+export type FileUploadProps = {
+  label: string;
+  name: string;
+  disabled?: boolean;
+  files?: File[];
+  onChange?: (files: File[]) => void;
+  handleRemove?: (index: number) => void;
+  accept?: 'image/*' | '.pdf' | '.docx' | '.txt' | '*';
+  onInvalidFile?: (file: File) => void;
+  inputText?: string;
+  multiple?: boolean;
+  hideDeleteButton?: boolean;
+  errorText?: string;
+  sx?: SxProps;
+  showImage?: boolean;
+  previewSx?: SxProps;
+};
+
+export const FileUpload = ({
+  label,
+  name = 'file-input',
+  disabled = false,
+  onChange,
+  handleRemove,
+  files = [],
+  accept = '*',
+  inputText,
+  onInvalidFile,
+  hideDeleteButton = false,
+  multiple = true,
+  errorText,
+  showImage,
+  previewSx,
+  sx,
+}: FileUploadProps) => {
+  const theme = useTheme();
+
+  if (!onChange) {
+    return <Typography>onChange Missing</Typography>;
+  }
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const newFiles = Array.from(event.target.files);
+      const validFiles: File[] = [];
+      const invalidFiles: File[] = [];
+
+      newFiles.forEach((file) => {
+        if (
+          accept === '*' ||
+          file.type.match(accept) ||
+          file.name.match(accept)
+        ) {
+          validFiles.push(file);
+        } else {
+          invalidFiles.push(file);
+        }
+      });
+
+      invalidFiles.forEach((file) => onInvalidFile?.(file));
+
+      if (validFiles.length > 0) {
+        if (multiple) {
+          onChange([...files, ...validFiles]);
+        } else {
+          onChange([validFiles[0]]);
+        }
+      }
+    }
+  };
+
+  return (
+    <Stack sx={sx}>
+      <Typography variant="label1">{label}</Typography>
+      <input
+        accept={accept}
+        style={{ display: 'none' }}
+        id={name}
+        name={name}
+        type="file"
+        multiple={multiple}
+        disabled={disabled}
+        onChange={handleFileChange}
+      />
+
+      <FormLabel htmlFor={name}>
+        <StyledFileSelectorContainer>
+          <Stack display={'flex'} alignItems={'center'}>
+            <Icons.ExportIcon size={20} />
+            <Typography
+              color={
+                disabled
+                  ? theme.palette.secondary.dark
+                  : theme.palette.primary.main
+              }
+              variant="label2"
+            >
+              {inputText ?? 'Upload Files'}
+            </Typography>
+          </Stack>
+        </StyledFileSelectorContainer>
+        {errorText && (
+          <Typography
+            sx={{
+              display: 'flex',
+              alignItems: 'flex-end',
+              justifyContent: 'flex-end',
+              color: theme.palette.highlight.highlightRed,
+            }}
+            variant="caption"
+          >
+            {errorText}
+          </Typography>
+        )}
+      </FormLabel>
+
+      <Box display="flex" gap="12px" flexWrap="wrap">
+        {showImage ? (
+          files.map((file, index) => (
+            <StyledSelectedFileContainer key={index}>
+              <Box
+                sx={{
+                  height: '120px',
+                  display: 'flex',
+                  overflow: 'hidden',
+                  borderRadius: '8px',
+                }}
+              >
+                <img
+                  src={URL.createObjectURL(file)}
+                  style={{
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'cover',
+                  }}
+                  alt={`Preview ${index}`}
+                />
+              </Box>
+
+              {!disabled && !hideDeleteButton && (
+                <IconButtons.DeleteButton
+                  onClick={() => {
+                    const updatedFiles = [...files];
+                    updatedFiles.splice(index, 1);
+                    onChange(updatedFiles);
+                  }}
+                  size="small"
+                />
+              )}
+            </StyledSelectedFileContainer>
+          ))
+        ) : (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '8px',
+              overflow: 'hidden',
+              backgroundColor: theme.palette.background.default,
+              borderRadius: '8px',
+            }}
+          >
+            <PreviewFiles
+              sx={previewSx}
+              files={files}
+              onChange={(newFiles) => onChange?.(newFiles)}
+            />
+          </Box>
+        )}
+      </Box>
+    </Stack>
+  );
+};
+
+const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '10px',
+  position: 'relative',
+  flex: '1 1 auto',
+  textAlign: 'center',
+  marginTop: '5px',
+  minWidth: '400px',
+  '& > button': {
+    position: 'absolute',
+    right: '-4%',
+    top: '-10%',
+  },
+}));
+
+const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
+  border: '1.5px dotted',
+  height: '120px',
+  display: 'flex',
+  width: '100%',
+  borderRadius: '5px',
+  borderColor: theme.palette.primary.main,
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:hover': {
+    borderColor: theme.palette.primary.light,
+    backgroundColor: theme.palette.secondary.light,
+    transition:
+      'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
+  },
+}));

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -2,6 +2,7 @@ import { Stack, SxProps } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
 import React, { ReactElement, ReactNode, isValidElement } from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
+import { FileUpload, FileUploadProps } from '../export';
 import FormActions, { FormActionsProps } from '../FormActions/FormActions';
 
 interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
@@ -21,6 +22,8 @@ type ControlledElementProps<T extends FieldValues = FieldValues> = {
   error?: boolean;
   helperText?: ReactNode;
   children?: ReactNode;
+  files?: File[];
+  onChange?: (files: File[]) => void;
   [key: string]: any;
 } & TextFieldProps;
 
@@ -47,10 +50,19 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
           name={name}
           control={control}
           render={({ field, fieldState: { error } }) => {
+            if (element.type === FileUpload) {
+              return React.cloneElement(element, {
+                ...(restProps as Partial<FileUploadProps>),
+                files: field.value || [],
+                ...field,
+                errorText: error ? error.message : undefined,
+              } as FileUploadProps);
+            }
             const additionalProps =
               element.type === 'input' && restProps.type === 'checkbox'
                 ? { checked: field.value }
                 : { value: field.value };
+            console.log(error);
             return React.cloneElement(element, {
               ...restProps,
               ...field,

package/src/components/Input/export.ts

@@ -1,5 +1,7 @@
 export * from './Button/Button';
 export * from './DatePicker/DatePicker';
+export * from './DateTimePicker/DateTimePicker';
+export * from './FileUpload/FileUpload';
 export * from './FormActions/FormActions';
 export * from './FormControlWrapper/FormControlWrapper';
 export * from './FormWrapper/FormWrapper';

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -1,4 +1,10 @@
-import { IconButton, Stack, useMediaQuery, useTheme } from '@mui/material';
+import {
+  IconButton,
+  Stack,
+  SxProps,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { ReactNode } from 'react';
 import { ReportIssueIcon } from '../../Assets/Icons/IconComponents/ReportIssueIcon';
 import { Typography } from '../../DataDisplay/Typography/Typography';
@@ -18,6 +24,7 @@ export interface AppHeaderProps {
   profileSx?: any;
   onLogoutClick?: any;
   showActiveDevices?: boolean;
+  headerSx?: SxProps;
 }
 
 export const AppHeader = ({
@@ -31,6 +38,7 @@ export const AppHeader = ({
   collapsed,
   institutionsData,
   showActiveDevices = true,
+  headerSx,
 }: AppHeaderProps) => {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
@@ -39,7 +47,11 @@ export const AppHeader = ({
     window.open('https://helpdesk.campx.in/helpdesk/my-tickets', '_blank');
   };
   return (
-    <StyledHeader collapsed={collapsed} className="appHeader">
+    <StyledHeader
+      collapsed={collapsed}
+      className="appHeader"
+      headerSx={headerSx}
+    >
       <Typography variant={isSmallScreen ? 'subtitle3' : 'subtitle2'}>
         {clientName}
       </Typography>

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -2,7 +2,14 @@ import { Box, Divider, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 export const StyledHeader = styled('header')(
-  ({ theme }: { theme?: any; collapsed: boolean }) => ({
+  ({
+    theme,
+    headerSx,
+  }: {
+    theme?: any;
+    collapsed: boolean;
+    headerSx?: any;
+  }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -17,10 +24,11 @@ export const StyledHeader = styled('header')(
     [theme.breakpoints.down('md')]: {
       height: '50px',
       minHeight: '50px',
-      width: 'calc(100% - 84px)',
+      width: headerSx?.width?.sm ? headerSx?.width?.sm : 'calc(100% - 84px)',
       marginTop: '12px',
       padding: '0 12px',
     },
+    ...headerSx,
   }),
 );
 

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,5 +1,9 @@
 import { Box, BoxProps, styled } from '@mui/material';
 
+export type PageContentProps = {
+  variant?: 'stepper' | 'standard';
+} & BoxProps;
+
 const PageContentContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -11,8 +15,21 @@ const PageContentContainer = styled(Box)(({ theme }) => ({
   borderRadius: '8px',
 }));
 
-export const PageContent = (props: BoxProps) => {
-  return (
+const PageStepperContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  gap: '10px',
+}));
+
+export const PageContent = ({
+  variant = 'standard',
+  ...props
+}: PageContentProps) => {
+  return variant == 'stepper' ? (
+    <PageStepperContainer {...props}>{props.children}</PageStepperContainer>
+  ) : (
     <PageContentContainer gap="12px" {...props}>
       {props.children}
     </PageContentContainer>

package/src/components/Layout/StepperTitle/StepperTitle.tsx

@@ -0,0 +1,39 @@
+import { Box, BoxProps, styled } from '@mui/material';
+import { ReactNode } from 'react';
+import { Typography } from '../../export';
+
+export type StepperTitleProps = {
+  title?: string;
+  isShowTitle?: boolean;
+  content: ReactNode;
+  contentProps?: BoxProps;
+  titleProps?: BoxProps;
+};
+
+const StepperTitleContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '8px',
+  minHeight: '100px',
+  minWidth: '60%',
+  backgroundColor: theme.palette.surface.paperBackground,
+}));
+
+const TitleContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.grey,
+  height: '45px',
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: '16px',
+}));
+
+export const StepperTitle = (props: StepperTitleProps) => {
+  return (
+    <StepperTitleContainer {...props.contentProps}>
+      {props.isShowTitle && (
+        <TitleContainer {...props.titleProps}>
+          <Typography variant="subtitle3">{props.title}</Typography>
+        </TitleContainer>
+      )}
+      {props.content}
+    </StepperTitleContainer>
+  );
+};

package/src/components/Layout/export.ts

@@ -2,4 +2,5 @@ export * from './AppHeader/AppHeader';
 export * from './PageContent/PageContent';
 export * from './PageHeader/components/DensitySelector/DensitySelector';
 export * from './PageHeader/PageHeader';
+export * from './StepperTitle/StepperTitle';
 export * from './TabsLayout/TabsLayout';

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -4,6 +4,7 @@ import {
   IconButton,
   Stack,
   styled,
+  SxProps,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -15,6 +16,7 @@ export type PreviewFilesProps = {
   label?: string;
   onChange?: (newFiles: File[], deletedFile: File) => void;
   showDownload?: boolean;
+  sx?: SxProps;
 } & Omit<BoxProps, 'onChange'>;
 
 export const PreviewFiles = ({
@@ -22,6 +24,7 @@ export const PreviewFiles = ({
   label,
   onChange,
   showDownload,
+  sx,
   ...props
 }: PreviewFilesProps) => {
   const theme = useTheme(),
@@ -86,7 +89,7 @@ export const PreviewFiles = ({
   if (resolvedFiles.length === 0) return <></>;
 
   return (
-    <Box {...props}>
+    <Box sx={sx} {...props}>
       {label && (
         <Typography
           marginBottom={'8px'}
@@ -103,12 +106,16 @@ export const PreviewFiles = ({
             direction={'row'}
             sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
           >
-            {getFileIcon(file)}
+            <Box width={'30px'} height={'30px'}>
+              {getFileIcon(file)}
+            </Box>
+
             <Stack direction={'column'} marginLeft={'8px'}>
               <Typography
                 fontSize={'14px'}
                 color={theme.palette.primary.main}
                 variant="label2"
+                sx={{ wordBreak: 'break-all' }}
               >
                 {file.name}
               </Typography>
@@ -149,7 +156,7 @@ export const PreviewFiles = ({
 
 const PreviewContainer = styled(Box)(({ theme }) => ({
   width: '100%',
-  height: '60px',
+  minHeight: '60px',
   cursor: 'pointer',
   backgroundColor: theme.palette.secondary.light,
   padding: '16px 8px',

package/src/stories/Input/DateTimePicker.stories.tsx

@@ -0,0 +1,124 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Meta, StoryObj } from '@storybook/react';
+import { add } from 'date-fns';
+import { DateTimePicker, Icons } from '../../components/export';
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: 'Input/DateTimePicker',
+  component: DateTimePicker,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateTimePicker>;
+
+const shortcutsItems = [
+  { label: 'Now', getValue: () => new Date() },
+  { label: '1 Hour Later', getValue: () => add(new Date(), { hours: 1 }) },
+  { label: '1 Hour Ago', getValue: () => add(new Date(), { hours: -1 }) },
+  {
+    label: 'New Year',
+    getValue: () => new Date(new Date().getFullYear(), 0, 1, 0, 0),
+  },
+];
+
+export const Primary: Story = {
+  args: {
+    label: 'Date Time Picker',
+    name: 'date-time-picker',
+    placeholder: 'Select Date and Time',
+    required: true,
+  },
+};
+
+export const WithShortcuts: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Shortcuts',
+    shortcutsItems,
+  },
+};
+
+export const CustomFormat: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Custom Format',
+    format: 'MMM dd, yyyy hh:mm a',
+  },
+};
+
+export const ViewsYearMonth: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Year and Month Views',
+    views: ['year', 'month'],
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Helper Text',
+    helperText: 'Please select a valid date and time',
+  },
+};
+
+export const MinMaxDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Min and Max Dates',
+    minDate: new Date('2024-01-01'),
+    maxDate: new Date('2024-12-31'),
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Custom Icon',
+    openPickerIcon: Icons.CareerIcon,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Read Only',
+    required: false,
+    disabled: true,
+    value: new Date('2024-09-15 14:30'),
+  },
+};
+
+export const DisableFutureDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Future Dates',
+    disableFuture: true,
+  },
+};
+
+export const DisablePastDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Past Dates',
+    disablePast: true,
+  },
+};
+
+export const DisableSpecificDates: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Weekends',
+    shouldDisableDate: (date: Date) =>
+      date.getDay() === 0 || date.getDay() === 6,
+  },
+};

package/src/themes/commonTheme.ts

@@ -334,6 +334,10 @@ export const getCommonTheme = (mode: Theme) => {
             fontSize: '14px ',
             fontFamily: 'Poppins',
             fontWeight: 600,
+            '@media (max-width:959.95px)': {
+              fontSize: '12px',
+              padding: '6px 12px ',
+            },
             '&:hover': {
               boxShadow: 'none ',
               '@media (hover: none )': {
@@ -558,6 +562,9 @@ export const getCommonTheme = (mode: Theme) => {
             minHeight: '50px',
             paddingBottom: '0px',
             justifyContent: 'flex-start',
+            '@media (max-width:959.95px)': {
+              fontSize: '12px',
+            },
             '&.Mui-selected': {
               color: ColorTokens.text.primary,
             },