first

src/providers/AdvanceTableProvider.tsx

@@ -0,0 +1,17 @@
+import { Table } from '@tanstack/react-table';
+import { PropsWithChildren, createContext, useContext } from 'react';
+
+export const AdvanceTableContext = createContext({});
+
+const AdvanceTableProvider = ({ children, ...rest }: PropsWithChildren) => {
+  return (
+    <AdvanceTableContext.Provider value={{ ...rest }}>
+      {children}
+    </AdvanceTableContext.Provider>
+  );
+};
+
+export const useAdvanceTableContext = <T,>() =>
+  useContext(AdvanceTableContext) as Table<T>;
+
+export default AdvanceTableProvider;

src/providers/AppProvider.tsx

@@ -0,0 +1,117 @@
+import React, {
+  createContext,
+  Dispatch,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useReducer
+} from 'react';
+import { getColor, getItemFromStore } from 'helpers/utils';
+import { Config, initialConfig } from 'config';
+import { ACTIONTYPE, configReducer, SET_CONFIG } from 'reducers/ConfigReducer';
+
+interface AppContextInterFace {
+  config: Config;
+  configDispatch: Dispatch<ACTIONTYPE>;
+  toggleTheme: () => void;
+  setConfig: (payload: Partial<Config>) => void;
+  getThemeColor: (name: string) => string;
+}
+
+export const AppContext = createContext({} as AppContextInterFace);
+
+const AppProvider = ({ children }: PropsWithChildren) => {
+  const configState: Config = {
+    isNavbarVerticalCollapsed: getItemFromStore(
+      'isNavbarVerticalCollapsed',
+      initialConfig.isNavbarVerticalCollapsed
+    ),
+    openNavbarVertical: initialConfig.openNavbarVertical,
+    theme: getItemFromStore('theme', initialConfig.theme),
+    navbarTopAppearance: getItemFromStore(
+      'navbarTopAppearance',
+      initialConfig.navbarTopAppearance
+    ),
+    navbarVerticalAppearance: getItemFromStore(
+      'navbarVerticalAppearance',
+      initialConfig.navbarVerticalAppearance
+    ),
+    navbarPosition: getItemFromStore(
+      'navbarPosition',
+      initialConfig.navbarPosition
+    ),
+    navbarTopShape: getItemFromStore(
+      'navbarTopShape',
+      initialConfig.navbarTopShape
+    ),
+    isRTL: getItemFromStore('isRTL', initialConfig.isRTL),
+    isDark: getItemFromStore('isDark', initialConfig.isDark),
+    isChatWidgetVisible: getItemFromStore(
+      'isChatWidgetVisible',
+      initialConfig.isChatWidgetVisible
+    )
+  };
+
+  const [config, configDispatch] = useReducer(configReducer, configState); // initail
+
+  const setConfig = (payload: Partial<Config>) => {
+    configDispatch({
+      type: SET_CONFIG,
+      payload
+    });
+  };
+
+  const toggleTheme = () => {
+    configDispatch({
+      type: SET_CONFIG,
+      payload: {
+        theme: config.isDark ? 'light' : 'dark'
+      }
+    });
+  };
+
+  const getThemeColor = (name: string) => {
+    return getColor(name);
+  };
+
+  useEffect(() => {
+    if (config.navbarTopShape === 'slim') {
+      // document.body.classList.add('nav-slim');
+      document.documentElement.setAttribute(
+        'data-navbar-horizontal-shape',
+        'slim'
+      );
+    } else {
+      document.documentElement.removeAttribute('data-navbar-horizontal-shape');
+    }
+
+    if (config.navbarPosition === 'dual') {
+      setConfig({
+        navbarTopShape: 'default'
+      });
+    }
+
+    document.documentElement.setAttribute(
+      'data-navigation-type',
+      config.navbarPosition
+    );
+
+    if (config.isNavbarVerticalCollapsed) {
+      document.documentElement.classList.add('navbar-vertical-collapsed');
+    } else {
+      document.documentElement.classList.remove('navbar-vertical-collapsed');
+    }
+  }, [config]);
+
+  return (
+    <AppContext.Provider
+      value={{ config, setConfig, toggleTheme, getThemeColor, configDispatch }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useAppContext = () => useContext(AppContext);
+
+export default AppProvider;

src/providers/BreakpointsProvider.tsx

@@ -0,0 +1,74 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
+
+type Breakpoints = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+};
+
+interface BreakpointContextInterface {
+  breakpoints: {
+    up: (bp: keyof Breakpoints) => boolean;
+    down: (bp: keyof Breakpoints) => boolean;
+  };
+}
+
+export const BreakpointContext = createContext(
+  {} as BreakpointContextInterface
+);
+
+const gridBreakpoints: Breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1440
+};
+
+const BreakpointsProvider = ({ children }: PropsWithChildren) => {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  const [breakpoints, setBreakpoints] = useState({
+    up: (bp: keyof Breakpoints) => {
+      return width > gridBreakpoints[bp];
+    },
+    down: (bp: keyof Breakpoints) => {
+      return width < gridBreakpoints[bp];
+    }
+  });
+  const updateDimensions = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateDimensions);
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, []);
+
+  useEffect(() => {
+    setBreakpoints({
+      up: bp => width >= gridBreakpoints[bp],
+      down: bp => width <= gridBreakpoints[bp]
+    });
+  }, [width]);
+
+  return (
+    <BreakpointContext.Provider value={{ breakpoints }}>
+      {children}
+    </BreakpointContext.Provider>
+  );
+};
+
+export const useBreakpoints = () => useContext(BreakpointContext);
+
+export default BreakpointsProvider;

src/providers/BulkSelectProvider.tsx

@@ -0,0 +1,65 @@
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { PropsWithChildren, useContext, createContext } from 'react';
+
+interface BulkSelectContextInterface<T> {
+  getParentCheckboxProps: () => {
+    checked: boolean;
+    indeterminate: boolean;
+    onChange: (event: unknown) => void;
+  };
+  getRowCheckboxProps: (id: string) => {
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    onChange: (event: unknown) => void;
+  };
+  getSelectedRows: () => T[];
+}
+
+export const BulkSelectContext = createContext({});
+
+const BulkSelectProvider = <T,>({
+  data,
+  children
+}: PropsWithChildren<{ data: T[] }>) => {
+  const table = useReactTable<T>({
+    data,
+    columns: [],
+    getCoreRowModel: getCoreRowModel()
+  });
+
+  const getParentCheckboxProps = () => {
+    return {
+      checked: table.getIsAllRowsSelected(),
+      indeterminate: table.getIsSomeRowsSelected(),
+      onChange: table.getToggleAllRowsSelectedHandler()
+    };
+  };
+
+  const getRowCheckboxProps = (id: string) => {
+    const row = table.getRow(id);
+    return {
+      checked: row.getIsSelected(),
+      disabled: !row.getCanSelect(),
+      indeterminate: row.getIsSomeSelected(),
+      onChange: row.getToggleSelectedHandler()
+    };
+  };
+
+  const getSelectedRows = () => {
+    return table.getSelectedRowModel().rows.map(row => row.original);
+  };
+
+  return (
+    <BulkSelectContext.Provider
+      value={{ getParentCheckboxProps, getRowCheckboxProps, getSelectedRows }}
+    >
+      {children}
+    </BulkSelectContext.Provider>
+  );
+};
+
+export const useBulkSelect = <T,>() =>
+  useContext(BulkSelectContext) as BulkSelectContextInterface<T>;
+
+export default BulkSelectProvider;

src/providers/CalendarProvider.tsx

@@ -0,0 +1,63 @@
+import { CalendarApi } from '@fullcalendar/core';
+import { EventImpl } from '@fullcalendar/core/internal';
+import {
+  PropsWithChildren,
+  useContext,
+  Dispatch,
+  createContext,
+  useReducer
+} from 'react';
+import {
+  CALENDAR_ACTION_TYPE,
+  calendarReducer
+} from 'reducers/CalendarReducer';
+
+export type CalendarView = 'dayGridMonth' | 'timeGridWeek';
+
+export interface CalendarState {
+  calendarApi: CalendarApi | null;
+  title: string;
+  view: CalendarView;
+  selectedEvent: EventImpl | null;
+  openNewEventModal: boolean;
+  selectedStartDate: Date | string;
+  selectedEndDate: Date | string;
+}
+
+interface CalendarContextInterface extends CalendarState {
+  calendarDispatch: Dispatch<CALENDAR_ACTION_TYPE>;
+}
+
+export const CalendarContext = createContext({} as CalendarContextInterface);
+
+const CalendarProvider = ({ children }: PropsWithChildren) => {
+  const initialState: CalendarState = {
+    calendarApi: null,
+    title: '',
+    view: 'dayGridMonth',
+    selectedEvent: null,
+    openNewEventModal: false,
+    selectedStartDate: '',
+    selectedEndDate: ''
+  };
+
+  const [calendarState, calendarDispatch] = useReducer(
+    calendarReducer,
+    initialState
+  );
+
+  return (
+    <CalendarContext.Provider
+      value={{
+        ...calendarState,
+        calendarDispatch
+      }}
+    >
+      {children}
+    </CalendarContext.Provider>
+  );
+};
+
+export const useCalendarContext = () => useContext(CalendarContext);
+
+export default CalendarProvider;

src/providers/ChatProvider.tsx

@@ -0,0 +1,77 @@
+import { Conversation } from 'data/chat';
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useReducer
+} from 'react';
+import { ACTIONTYPE, SET_CHAT_STATE, chatReducer } from 'reducers/ChatReducer';
+
+export type ConversationFilterType = 'all' | 'read' | 'unread';
+interface ChatProviderInterface {
+  conversations: Conversation[];
+}
+
+export interface ChatState {
+  conversations: Conversation[];
+  currentConversation: null | Conversation;
+  filterBy: ConversationFilterType;
+  showConversationDetails: boolean;
+  showUserListOffcanvas: boolean;
+}
+
+interface ChatContextInterface extends ChatState {
+  // chatState: ChatState;
+  chatDispatch: Dispatch<ACTIONTYPE>;
+  setShowConversationDetails: (value: boolean) => void;
+  setShowUserListOffcanvas: (value: boolean) => void;
+}
+
+export const ChatContext = createContext({} as ChatContextInterface);
+
+const ChatProvider = ({
+  children,
+  conversations
+}: PropsWithChildren<ChatProviderInterface>) => {
+  const initState: ChatState = {
+    conversations: conversations,
+    currentConversation: null,
+    filterBy: 'all',
+    showUserListOffcanvas: false,
+    showConversationDetails: false
+  };
+
+  const [chatState, chatDispatch] = useReducer(chatReducer, initState);
+
+  const setShowConversationDetails = (value: boolean) => {
+    chatDispatch({
+      type: SET_CHAT_STATE,
+      payload: { showConversationDetails: value }
+    });
+  };
+
+  const setShowUserListOffcanvas = (value: boolean) => {
+    chatDispatch({
+      type: SET_CHAT_STATE,
+      payload: { showUserListOffcanvas: value }
+    });
+  };
+
+  return (
+    <ChatContext.Provider
+      value={{
+        ...chatState,
+        chatDispatch,
+        setShowConversationDetails,
+        setShowUserListOffcanvas
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+};
+
+export const useChatContext = () => useContext(ChatContext);
+
+export default ChatProvider;

src/providers/ChatWidgetProvider.tsx

@@ -0,0 +1,76 @@
+import { FileAttachment } from 'components/common/AttachmentPreview';
+import { supportChat, Message as MessageType, Conversation } from 'data/chat';
+import dayjs from 'dayjs';
+import {
+  createContext,
+  PropsWithChildren,
+  useState,
+  useContext,
+  Dispatch,
+  SetStateAction,
+  useCallback
+} from 'react';
+
+interface ChatWidgetProps {
+  isOpenChat: boolean;
+  conversation: Conversation;
+  setConversation: Dispatch<SetStateAction<Conversation>>;
+  setIsOpenChat: Dispatch<SetStateAction<boolean>>;
+  sentMessage: ({
+    message,
+    attachments
+  }: {
+    message?: string;
+    attachments?: { images?: string[]; file?: FileAttachment };
+  }) => void;
+}
+
+export const ChatWidgetContext = createContext({} as ChatWidgetProps);
+
+const ChatWidgetProvider = ({ children }: PropsWithChildren) => {
+  const [isOpenChat, setIsOpenChat] = useState(false);
+  const [conversation, setConversation] = useState(supportChat);
+
+  const sentMessage = useCallback(
+    ({
+      message,
+      attachments
+    }: {
+      message?: string;
+      attachments?: { images?: string[]; file?: FileAttachment };
+    }) => {
+      const newMessages = [
+        ...conversation.messages,
+        {
+          id: Date.now(),
+          type: 'sent',
+          time: dayjs().toNow(),
+          readAt: null,
+          message,
+          attachments
+        } as MessageType
+      ];
+      const newConversation = { ...conversation, messages: newMessages };
+      setConversation(newConversation);
+    },
+    [conversation]
+  );
+
+  return (
+    <ChatWidgetContext.Provider
+      value={{
+        conversation,
+        setConversation,
+        isOpenChat,
+        setIsOpenChat,
+        sentMessage
+      }}
+    >
+      {children}
+    </ChatWidgetContext.Provider>
+  );
+};
+
+export const useChatWidgetContext = () => useContext(ChatWidgetContext);
+
+export default ChatWidgetProvider;

src/providers/CrmDealsProvider.tsx

@@ -0,0 +1,192 @@
+import { DealColumn, Deal } from 'data/crm/deals';
+import {
+  useState,
+  createContext,
+  Dispatch,
+  SetStateAction,
+  PropsWithChildren,
+  useContext,
+  useCallback
+} from 'react';
+import { DragStartEvent, DragOverEvent, DragEndEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+
+interface DealsContextInterface {
+  dealColumns: DealColumn[];
+  setDealColumns: Dispatch<SetStateAction<DealColumn[]>>;
+  openAddDealModal: boolean;
+  setOpenAddDealModal: Dispatch<SetStateAction<boolean>>;
+  openFilterDealModal: boolean;
+  setOpenFilterDealModal: Dispatch<SetStateAction<boolean>>;
+  openAddStageModal: boolean;
+  setOpenAddStageModal: Dispatch<SetStateAction<boolean>>;
+  activeDeal: Deal | null;
+  activeColumnId: number | null;
+  handleDragStart: (event: DragStartEvent) => void;
+  handleDragOver: (event: DragOverEvent) => void;
+  handleDragEnd: (result: DragEndEvent) => void;
+  handleAddStage: (formData: DealColumn) => void;
+}
+
+export const DealsContext = createContext({} as DealsContextInterface);
+
+const DealsProvider = ({
+  children,
+  data
+}: PropsWithChildren<{ data: DealColumn[] }>) => {
+  const [dealColumns, setDealColumns] = useState(data);
+  const [openAddDealModal, setOpenAddDealModal] = useState(false);
+  const [openFilterDealModal, setOpenFilterDealModal] = useState(false);
+  const [openAddStageModal, setOpenAddStageModal] = useState(false);
+  const [activeDeal, setActiveDeal] = useState(null);
+  const [activeColumnId, setActiveColumnId] = useState(null);
+
+  const findColumn = (id: number) => {
+    return dealColumns.find(
+      col => col.deals.some(deal => deal.id === id) || col.id === id
+    );
+  };
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      setActiveDeal(active.data.current?.item);
+      setActiveColumnId(active.data.current?.columnId);
+    },
+    [dealColumns]
+  );
+
+  const handleDragOver = useCallback(
+    (event: DragOverEvent) => {
+      const { active, over } = event;
+
+      if (!active.id || !over?.id) return;
+
+      const activeId = Number(active.id);
+      const overId = Number(over.id);
+
+      const activeColumn = findColumn(activeId);
+      const overColumn = findColumn(overId);
+
+      if (!activeColumn || !overColumn || activeColumn.id === overColumn.id)
+        return;
+
+      const updatedColumns = structuredClone(dealColumns);
+      const updatedActiveColumn = updatedColumns.find(
+        col => col.id === activeColumn.id
+      );
+      const updatedOverColumn = updatedColumns.find(
+        col => col.id === overColumn.id
+      );
+
+      if (updatedActiveColumn && updatedOverColumn) {
+        const activeDealIndex = updatedActiveColumn.deals.findIndex(
+          deal => deal.id === activeId
+        );
+
+        const movedDeal = updatedActiveColumn.deals.splice(
+          activeDealIndex,
+          1
+        )[0];
+
+        updatedOverColumn.deals.push(movedDeal);
+
+        setDealColumns(updatedColumns);
+      }
+    },
+    [dealColumns]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (!active.id || !over?.id) return;
+
+      const activeId = Number(active.id);
+      const overId = Number(over.id);
+
+      const activeColumn = findColumn(activeId);
+      const overColumn = findColumn(overId);
+
+      if (!activeColumn || !overColumn) return;
+
+      const updatedColumns = structuredClone(dealColumns);
+      const updatedActiveColumn = updatedColumns.find(
+        col => col.id === activeColumn.id
+      );
+      const updatedOverColumn = updatedColumns.find(
+        col => col.id === overColumn.id
+      );
+
+      if (updatedActiveColumn && updatedOverColumn) {
+        if (activeColumn.id === overColumn.id) {
+          const activeIndex = updatedActiveColumn.deals.findIndex(
+            deal => deal.id === activeId
+          );
+          const overIndex = updatedOverColumn.deals.findIndex(
+            deal => deal.id === overId
+          );
+
+          updatedActiveColumn.deals = arrayMove(
+            updatedActiveColumn.deals,
+            activeIndex,
+            overIndex
+          );
+        } else {
+          const activeDealIndex = updatedActiveColumn.deals.findIndex(
+            deal => deal.id === activeId
+          );
+          const movedDeal = updatedActiveColumn.deals.splice(
+            activeDealIndex,
+            1
+          )[0];
+
+          const overIndex = updatedOverColumn.deals.findIndex(
+            deal => deal.id === overId
+          );
+
+          updatedOverColumn.deals.splice(overIndex + 1, 0, movedDeal);
+        }
+
+        setDealColumns(updatedColumns);
+        setActiveDeal(null);
+        setActiveColumnId(null);
+      }
+    },
+    [dealColumns]
+  );
+
+  const handleAddStage = useCallback(
+    (formData: DealColumn) => {
+      setDealColumns([...dealColumns, formData]);
+    },
+    [dealColumns]
+  );
+  return (
+    <DealsContext.Provider
+      value={{
+        dealColumns,
+        setDealColumns,
+        openAddDealModal,
+        setOpenAddDealModal,
+        openFilterDealModal,
+        setOpenFilterDealModal,
+        openAddStageModal,
+        setOpenAddStageModal,
+        activeDeal,
+        activeColumnId,
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        handleAddStage
+      }}
+    >
+      {children}
+    </DealsContext.Provider>
+  );
+};
+
+export const useDealsContext = () => useContext(DealsContext);
+
+export default DealsProvider;

src/providers/FaqTabProvider.tsx

@@ -0,0 +1,43 @@
+import {
+  useState,
+  createContext,
+  Dispatch,
+  SetStateAction,
+  PropsWithChildren,
+  useContext
+} from 'react';
+
+interface FaqTabContextInterface {
+  activeKey: string;
+  setActiveKey: Dispatch<SetStateAction<string>>;
+  subCategoryActiveKey: string;
+  setSubCategoryActiveKey: Dispatch<SetStateAction<string>>;
+  isOpenOfcanvas: boolean;
+  setIsOpenOffcanvas: Dispatch<SetStateAction<boolean>>;
+}
+
+export const FaqTabContext = createContext({} as FaqTabContextInterface);
+
+const FaqTabProvider = ({ children }: PropsWithChildren) => {
+  const [activeKey, setActiveKey] = useState('all');
+  const [subCategoryActiveKey, setSubCategoryActiveKey] = useState('sale-101');
+  const [isOpenOfcanvas, setIsOpenOffcanvas] = useState(false);
+  return (
+    <FaqTabContext.Provider
+      value={{
+        activeKey,
+        setActiveKey,
+        subCategoryActiveKey,
+        setSubCategoryActiveKey,
+        isOpenOfcanvas,
+        setIsOpenOffcanvas
+      }}
+    >
+      {children}
+    </FaqTabContext.Provider>
+  );
+};
+
+export const useFaqTabContext = () => useContext(FaqTabContext);
+
+export default FaqTabProvider;

src/providers/KanbanProvider.tsx

@@ -0,0 +1,55 @@
+import { KanbanBoardItem, kanbanItems } from 'data/kanban';
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useReducer
+} from 'react';
+import { ACTIONTYPE, kanbanReducer } from 'reducers/KanbanReducer';
+
+export type ConversationFilterType = 'all' | 'read' | 'unread';
+interface KanbanProviderInterface {}
+
+export interface KanbanState {
+  openBoardDetailsOffcanvas: boolean;
+  openAddListModal: boolean;
+  boardLists: KanbanBoardItem[];
+}
+
+interface KanbanContextInterface extends KanbanState {
+  kanbanDispatch: Dispatch<ACTIONTYPE>;
+}
+
+export const KanbanContext = createContext({} as KanbanContextInterface);
+
+const useKanbanReducer = () => {
+  const initState: KanbanState = {
+    openBoardDetailsOffcanvas: false,
+    openAddListModal: false,
+    boardLists: kanbanItems
+  };
+
+  return useReducer(kanbanReducer, initState);
+};
+
+const KanbanProvider = ({
+  children
+}: PropsWithChildren<KanbanProviderInterface>) => {
+  const [kanbanState, kanbanDispatch] = useKanbanReducer();
+
+  return (
+    <KanbanContext.Provider
+      value={{
+        ...kanbanState,
+        kanbanDispatch
+      }}
+    >
+      {children}
+    </KanbanContext.Provider>
+  );
+};
+
+export const useKanbanContext = () => useContext(KanbanContext);
+
+export default KanbanProvider;

src/providers/MainLayoutProvider.tsx

@@ -0,0 +1,35 @@
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useState
+} from 'react';
+
+interface MainLayoutContextInterface {
+  contentClass: string;
+  setContentClass: Dispatch<SetStateAction<string>>;
+  footerClass: string;
+  setFooterClass: Dispatch<SetStateAction<string>>;
+}
+
+export const MainLayoutContext = createContext(
+  {} as MainLayoutContextInterface
+);
+
+const MainLayoutProvider = ({ children }: PropsWithChildren) => {
+  const [contentClass, setContentClass] = useState('');
+  const [footerClass, setFooterClass] = useState('');
+  return (
+    <MainLayoutContext.Provider
+      value={{ contentClass, setContentClass, footerClass, setFooterClass }}
+    >
+      {children}
+    </MainLayoutContext.Provider>
+  );
+};
+
+export const useMainLayoutContext = () => useContext(MainLayoutContext);
+
+export default MainLayoutProvider;

src/providers/PhoenixDocProvider.tsx

@@ -0,0 +1,44 @@
+import React, {
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useState
+} from 'react';
+
+interface CollapseContextInterface {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  showPreviewBtn: boolean;
+  setShowPreviewBtn: Dispatch<SetStateAction<boolean>>;
+  textToCopy: string;
+  setTextToCopy: Dispatch<SetStateAction<string>>;
+}
+
+export const CollapseContext = createContext({} as CollapseContextInterface);
+
+const PhoenixDocProvider = ({ children }: PropsWithChildren) => {
+  const [open, setOpen] = useState(false);
+  const [showPreviewBtn, setShowPreviewBtn] = useState(true);
+  const [textToCopy, setTextToCopy] = useState('');
+
+  return (
+    <CollapseContext.Provider
+      value={{
+        open,
+        setOpen,
+        showPreviewBtn,
+        setShowPreviewBtn,
+        textToCopy,
+        setTextToCopy
+      }}
+    >
+      {children}
+    </CollapseContext.Provider>
+  );
+};
+
+export const usePhoenixDocContext = () => useContext(CollapseContext);
+
+export default PhoenixDocProvider;

src/providers/ScrollSpyProvider.tsx

@@ -0,0 +1,34 @@
+import {
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useState
+} from 'react';
+
+interface ScrollSpyContextInterface {
+  activeElemId: string;
+  setActiveElemId: Dispatch<SetStateAction<string>>;
+  visibleItems: string[];
+  setVisibleItems: Dispatch<SetStateAction<string[]>>;
+}
+
+export const ScrollSpyContext = createContext({} as ScrollSpyContextInterface);
+
+const ScrollSpyProvider = ({ children }: PropsWithChildren) => {
+  const [activeElemId, setActiveElemId] = useState('');
+  const [visibleItems, setVisibleItems] = useState<string[]>([]);
+
+  return (
+    <ScrollSpyContext.Provider
+      value={{ activeElemId, setActiveElemId, visibleItems, setVisibleItems }}
+    >
+      {children}
+    </ScrollSpyContext.Provider>
+  );
+};
+
+export const useScrollSpyContext = () => useContext(ScrollSpyContext);
+
+export default ScrollSpyProvider;

src/providers/SettingsPanelProvider.tsx

@@ -0,0 +1,92 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
+import { useAppContext } from './AppProvider';
+
+export interface SettingsPanelConfig {
+  showSettingPanelButton: boolean;
+  openSettingPanel: boolean;
+  disableNavigationType: boolean;
+  disableVerticalNavbarAppearance: boolean;
+  disableHorizontalNavbarShape: boolean;
+  disableHorizontalNavbarAppearance: boolean;
+  disableResetButton: boolean;
+}
+
+interface SettingsPanelContextInterFace {
+  settingsPanelConfig: SettingsPanelConfig;
+  setSettingsPanelConfig: (config: Partial<SettingsPanelConfig>) => void;
+}
+
+export const SettingsPanelContext = createContext(
+  {} as SettingsPanelContextInterFace
+);
+
+const SettingsPanelProvider = ({ children }: PropsWithChildren) => {
+  const {
+    config: { navbarPosition }
+  } = useAppContext();
+
+  const [settingsPanelConfig, setSettingsPanelConfig] =
+    useState<SettingsPanelConfig>({
+      showSettingPanelButton: true,
+      openSettingPanel: false,
+      disableNavigationType: false,
+      disableVerticalNavbarAppearance: false,
+      disableHorizontalNavbarShape: false,
+      disableHorizontalNavbarAppearance: false,
+      disableResetButton: false
+    });
+
+  const updateSettingsPanelConfig = (config: Partial<SettingsPanelConfig>) => {
+    setSettingsPanelConfig({
+      ...settingsPanelConfig,
+      ...config
+    });
+  };
+
+  useEffect(() => {
+    if (navbarPosition === 'dual') {
+      updateSettingsPanelConfig({
+        disableHorizontalNavbarShape: true,
+        disableVerticalNavbarAppearance: true,
+        disableHorizontalNavbarAppearance: false
+      });
+    }
+
+    if (navbarPosition === 'horizontal') {
+      updateSettingsPanelConfig({
+        disableHorizontalNavbarShape: false,
+        disableVerticalNavbarAppearance: true,
+        disableHorizontalNavbarAppearance: false
+      });
+    }
+
+    if (navbarPosition === 'combo' || navbarPosition === 'vertical') {
+      updateSettingsPanelConfig({
+        disableHorizontalNavbarShape: false,
+        disableVerticalNavbarAppearance: false,
+        disableHorizontalNavbarAppearance: false
+      });
+    }
+  }, [navbarPosition]);
+
+  return (
+    <SettingsPanelContext.Provider
+      value={{
+        settingsPanelConfig,
+        setSettingsPanelConfig: updateSettingsPanelConfig
+      }}
+    >
+      {children}
+    </SettingsPanelContext.Provider>
+  );
+};
+
+export default SettingsPanelProvider;
+
+export const useSettingsPanelContext = () => useContext(SettingsPanelContext);

src/providers/WizardFormProvider.tsx

@@ -0,0 +1,39 @@
+import { UseWizardFormResult } from 'hooks/useWizardForm';
+import { Context, PropsWithChildren, createContext, useContext } from 'react';
+import { Tab } from 'react-bootstrap';
+
+interface WizardFormContextInterface<T> extends UseWizardFormResult<T> {}
+interface WizardFormProviderInterface<T>
+  extends WizardFormContextInterface<T> {}
+
+export const WizardFormContext = createContext(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  {} as WizardFormContextInterface<any>
+);
+
+const WizardFormProvider = <T,>({
+  children,
+  ...rest
+}: PropsWithChildren<WizardFormProviderInterface<T>>) => {
+  const { selectedStep, goToStep } = rest;
+  return (
+    <WizardFormContext.Provider value={{ ...rest }}>
+      <Tab.Container
+        activeKey={selectedStep}
+        onSelect={(eventKey: string | null) => {
+          if (eventKey) {
+            goToStep(Number(eventKey));
+          }
+        }}
+      >
+        {children}
+      </Tab.Container>
+      {/* <WizardAccessDeniedModal /> */}
+    </WizardFormContext.Provider>
+  );
+};
+
+export const useWizardFormContext = <T,>() =>
+  useContext(WizardFormContext as Context<WizardFormContextInterface<T>>);
+
+export default WizardFormProvider;