@campxdev/react-blueprint 1.6.4 → 1.6.6

package/src/redux/slices/pageHeaderSlice.ts

@@ -1,33 +1,95 @@
 import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
 import { createSlice } from '@reduxjs/toolkit';
 
-export type PageHeaderState = {
-  [uniqueId: string]: {
-    density: GridDensity;
-    columnVisibilityModel: GridColumnVisibilityModel;
+export type PageHeaderSingleState = {
+  density: GridDensity;
+  columnVisibilityModel: GridColumnVisibilityModel;
+  filters: {
+    search?: string;
+    limit: number;
+    offset: number;
+    skip: number;
+    [x: string]: any;
   };
 };
 
+export type PageHeaderState = {
+  [uniqueId: string]: PageHeaderSingleState;
+};
+
 const initialState: PageHeaderState = {};
 
 export const pageHeaderSlice = createSlice({
   name: 'pageHeader',
   initialState,
   reducers: {
-    setColumnVisibilityModel: (state, action) => {
+    setColumnVisibilityModelForUniqueId: (state, action) => {
       const { uniqueId, columnVisibilityModel } = action.payload;
       state[uniqueId] = { ...state[uniqueId], columnVisibilityModel };
     },
-    setDensity: (state, action) => {
+    setDensityForUniqueId: (state, action) => {
       const { uniqueId, density } = action.payload;
       state[uniqueId] = { ...state[uniqueId], density };
     },
+    setSearchForUniqueId: (state, action) => {
+      const { uniqueId, search } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId]?.filters,
+          search: search,
+        },
+      };
+    },
     resetStateForUniqueId: (state, action) => {
       const { uniqueId } = action.payload;
-      state[uniqueId] = { density: 'standard', columnVisibilityModel: {} };
+      state[uniqueId] = {
+        density: 'standard',
+        columnVisibilityModel: {},
+        filters: {
+          limit: 10,
+          offset: 0,
+          skip: 0,
+        },
+      };
+    },
+    setLimitForUniqueId: (state, action) => {
+      const { uniqueId, limit } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          limit: limit,
+        },
+      };
+    },
+    setOffsetForUniqueId: (state, action) => {
+      const { uniqueId, offset } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          offset: offset,
+          skip: offset,
+        },
+      };
+    },
+    setDefaultFiltersForUniqueId: (state, action) => {
+      const { uniqueId, defaultFilters } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: defaultFilters,
+      };
     },
   },
 });
 
-export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
-  pageHeaderSlice.actions;
+export const {
+  setColumnVisibilityModelForUniqueId,
+  setDensityForUniqueId,
+  resetStateForUniqueId,
+  setSearchForUniqueId,
+  setDefaultFiltersForUniqueId,
+  setLimitForUniqueId,
+  setOffsetForUniqueId,
+} = pageHeaderSlice.actions;

package/src/stories/DataDisplay/ActivityLogView.stories.tsx

@@ -0,0 +1,96 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { Activity, ActivityLogView } from '../../components/export';
+
+// Mock data for the story with diverse timestamps and actions
+const activitiesData: Activity[] = [
+  {
+    userName: 'John Doe',
+    action: 'create',
+    message: "created 'Student Registration'",
+    timestamp: new Date().toISOString(), // Today
+  },
+  {
+    userName: 'Jane Smith',
+    action: 'update',
+    message: `updated 'Employee Record'
+• 'Position' has been changed from 'Junior Developer' to 'Senior Developer'
+• 'Salary' has been changed from '$50,000' to '$70,000'
+• 'Department' has been changed from 'IT Support' to 'Software Development'
+• 'Supervisor' has been changed from 'Mr. Adams' to 'Ms. Johnson'
+• 'Work Hours' have been changed from '40' to '45'`,
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago (Past Week)
+  },
+  {
+    userName: 'Admin',
+    action: 'delete',
+    message: "deleted 'Annual Report'",
+    timestamp: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago (Older)
+  },
+  {
+    userName: 'Alice Johnson',
+    action: 'create',
+    message: "created 'Course Outline'",
+    timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago (Past Week)
+  },
+  {
+    userName: 'Bob Brown',
+    action: 'update',
+    message: `updated 'Project Details'
+• 'Project Name' has been changed from 'Website Revamp' to 'Mobile App Launch'
+• 'Deadline' has been changed from 'June 2023' to 'August 2023'
+• 'Team Members' have been changed from '5' to '8'
+• 'Budget' has been changed from '$20,000' to '$35,000'
+• 'Client Contact' has been changed from 'Mr. Lee' to 'Mrs. Gomez'`,
+    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // Yesterday (Past Week)
+  },
+  {
+    userName: 'Charlie Green',
+    action: 'delete',
+    message: "deleted 'Temporary Files'",
+    timestamp: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(), // 15 days ago (Older)
+  },
+  {
+    userName: 'Emily White',
+    action: 'update',
+    message: `updated 'Client Information'
+• 'Client Name' has been changed from 'Acme Corp' to 'Globex Inc.'
+• 'Contact Number' has been changed from '123-456-7890' to '987-654-3210'
+• 'Address' has been changed from '123 Main St' to '456 Elm St'
+• 'Email' has been changed from 'info@acme.com' to 'contact@globex.com'
+• 'Account Manager' has been changed from 'John Smith' to 'Laura Adams'`,
+    timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago (Past Week)
+  },
+];
+
+const meta: Meta<typeof ActivityLogView> = {
+  title: 'DataDisplay/ActivityLog',
+  component: ActivityLogView,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActivityLogView>;
+
+export const Default: Story = {
+  args: {
+    activitiesData,
+    isFetchingNextPage: false,
+    fetchNextPage: action('fetchNextPage'),
+    hasNextPage: true,
+    fromDate: null,
+    toDate: null,
+    setFromDate: action('setFromDate'),
+    setToDate: action('setToDate'),
+    isLoading: false,
+  },
+};

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import {
-  Button,
-  Icons,
-  Tooltip,
-  ToolTipContent,
-} from '../../components/export';
+import { Button, Icons, Tooltip } from '../../components/export';
+import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
 
 export default {
   title: 'Feedback/Tooltip',

package/src/stories/Input/TextField.stories.tsx

@@ -5,8 +5,8 @@ import { Meta } from '@storybook/react';
 import { InputAdornment as MuiInputAdornment } from '@mui/material';
 import { Icons } from '../../components/Assets/Icons/Icons';
 
-import { TextField, TextFieldProps, Tooltip, ToolTipContent } from '../../components/export';
-
+import { TextField, TextFieldProps, Tooltip } from '../../components/export';
+import { ToolTipContent } from '../../components/Feedback/Tooltip/ToolTipContent';
 
 // Define the default export with Meta type including the component type
 export default {