[docs] Remove explicit date-fns dependency

docs/package.json

@@ -67,8 +67,6 @@
     "core-js": "^2.6.11",
     "cross-env": "^7.0.3",
     "css-mediaquery": "^0.1.2",
-    "date-fns": "^2.30.0",
-    "date-fns-jalali": "^2.21.3-1",
     "dayjs": "^1.11.13",
     "feed": "^4.2.2",
     "fg-loadcss": "^3.1.0",

docs/src/components/productX/XDateRangeDemo.tsx

@@ -7,25 +7,25 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
 import { PickersShortcutsItem, PickersShortcutsProps, DateRange } from '@mui/x-date-pickers-pro';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { startOfWeek, endOfWeek, subDays } from 'date-fns';
+import dayjs, { Dayjs } from 'dayjs';
 import Frame from 'docs/src/components/action/Frame';
 
-const startDate = new Date();
-startDate.setDate(10);
-const endDate = new Date();
-endDate.setDate(endDate.getDate() + 28);
+const startDate = dayjs();
+startDate.date(10);
+const endDate = dayjs();
+endDate.date(endDate.date() + 28);
 
-function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Date>>) {
+function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Dayjs>>) {
   const { items, onChange, isValid, changeImportance = 'accept' } = props;
 
   if (items == null || items.length === 0) {
     return null;
   }
 
-  const resolvedItems = items.map((item: PickersShortcutsItem<DateRange<Date>>) => {
+  const resolvedItems = items.map((item: PickersShortcutsItem<DateRange<Dayjs>>) => {
     const newValue = item.getValue({ isValid });
 
     return {
@@ -80,25 +80,25 @@ const code = `
 </LocalizationProvider>`;
 
 export default function XDateRangeDemo() {
-  const today = new Date();
-  const shortcutsItems: PickersShortcutsItem<DateRange<Date>>[] = [
+  const today = dayjs();
+  const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
     {
       label: 'This Week',
       getValue: () => {
-        return [startOfWeek(today), endOfWeek(today)];
+        return [today.startOf('week'), today.endOf('week')];
       },
     },
     {
       label: 'Last Week',
       getValue: () => {
-        const prevWeek = subDays(today, 7);
-        return [startOfWeek(prevWeek), endOfWeek(prevWeek)];
+        const prevWeek = today.add(-7, 'days');
+        return [prevWeek.startOf('week'), prevWeek.endOf('week')];
       },
     },
     {
       label: 'Last 7 Days',
       getValue: () => {
-        return [subDays(today, 7), today];
+        return [today.add(-7, 'days'), today];
       },
     },
     { label: 'Reset', getValue: () => [null, null] },
@@ -164,7 +164,7 @@ export default function XDateRangeDemo() {
               }),
           ]}
         >
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
             <StaticDateRangePicker
               displayStaticWrapperAs="desktop"
               value={[startDate, endDate]}

docs/src/components/productX/XHero.tsx

@@ -5,7 +5,7 @@ import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { alpha } from '@mui/material/styles';
 import {
@@ -20,11 +20,12 @@ import HeroContainer from 'docs/src/layouts/HeroContainer';
 import IconImage from 'docs/src/components/icon/IconImage';
 import FolderTreeView from 'docs/src/components/showcase/FolderTreeView';
 import ROUTES from 'docs/src/route';
+import dayjs from 'dayjs';
 
-const startDate = new Date();
-startDate.setDate(10);
-const endDate = new Date();
-endDate.setDate(endDate.getDate() + 28);
+const startDate = dayjs();
+startDate.date(10);
+const endDate = dayjs();
+endDate.date(endDate.date() + 28);
 
 const visibleFields = [
   'commodity',
@@ -345,7 +346,7 @@ export default function XHero() {
                   }),
               ]}
             >
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <StaticDateRangePicker
                   displayStaticWrapperAs="desktop"
                   value={[startDate, endDate]}

docs/src/components/showcase/ThemeDatePicker.tsx

@@ -3,13 +3,13 @@ import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import { iconButtonClasses } from '@mui/material/IconButton';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
 export default function ThemeDatePicker() {
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Fade in timeout={700}>
         <Box
           sx={[