feat: implement calendar scheduling (#7574)

* wip * feat: add calendar scheduling * fix: update names * UI Changes for calendar scheduling --------- Co-authored-by: Kamran Ahmed <[email protected]>
kamranahmedse · Nov 8, 2024 · 2a6c1bf · 2a6c1bf
1 parent e4c863b
commit 2a6c1bf
Show file tree

Hide file tree

Showing 15 changed files with 614 additions and 50 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1729612578122
+		"lastUpdateCheck": 1731065649795
 	}
 }
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
+    "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "astro": "^4.16.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/FrameRenderer/ProgressNudge.tsx b/src/components/FrameRenderer/ProgressNudge.tsx
@@ -1,13 +1,22 @@
 import { cn } from '../../lib/classname.ts';
 import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
 import { useStore } from '@nanostores/react';
+import { Calendar, Info, X } from 'lucide-react';
+import { Tooltip } from '../Tooltip.tsx';
+import { useState } from 'react';
+import { ScheduleEventModal } from '../Schedule/ScheduleEventModal.tsx';
 
 type ProgressNudgeProps = {
   resourceType: 'roadmap' | 'best-practice';
   resourceId: string;
 };
 
 export function ProgressNudge(props: ProgressNudgeProps) {
+  const { resourceId, resourceType } = props;
+
+  const [isNudgeHidden, setIsNudgeHidden] = useState(false);
+  const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
+
   const $totalRoadmapNodes = useStore(totalRoadmapNodes);
   const $roadmapProgress = useStore(roadmapProgress);
 
@@ -17,52 +26,80 @@ export function ProgressNudge(props: ProgressNudgeProps) {
 
   const hasProgress = done > 0;
 
-  if (!$totalRoadmapNodes) {
+  if (!$totalRoadmapNodes || isNudgeHidden) {
     return null;
   }
 
   return (
-    <div
-      className={
-        'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all duration-300 sm:block'
-      }
-    >
-      <span
-        className={cn('block', {
-          hidden: hasProgress,
-        })}
+    <>
+      {isScheduleModalOpen && (
+        <ScheduleEventModal
+          onClose={() => {
+            setIsScheduleModalOpen(false);
+          }}
+          roadmapId={resourceId}
+        />
+      )}
+      <div
+        className={
+          'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up flex-row gap-1.5 transition-all duration-300 lg:flex'
+        }
       >
-        <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
-          Tip
-        </span>
-        <span className="text-sm text-gray-200">
-          Right-click on a topic to mark it as done.{' '}
+        <div
+          className={
+            'relative overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl'
+          }
+        >
+          <span
+            className={cn('flex items-center', {
+              hidden: hasProgress,
+            })}
+          >
+            <span className="mr-2 text-sm font-semibold uppercase text-yellow-400">
+              Tip
+            </span>
+            <span className="text-sm text-gray-200">
+              Right-click a topic to mark it as done &nbsp;
+            </span>
+          </span>
+          <span
+            className={cn('relative z-20 block text-sm', {
+              hidden: !hasProgress,
+            })}
+          >
+            <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
+              Progress
+            </span>
+            <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span>{' '}
+            of <span>{$totalRoadmapNodes}</span> Done
+          </span>
+
+          <span
+            className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
+            style={{
+              width: `${(done / $totalRoadmapNodes) * 100}%`,
+            }}
+          ></span>
+        </div>
+        {resourceType === 'roadmap' && (
           <button
-            data-popup="progress-help"
-            className="cursor-pointer font-semibold text-yellow-500 underline"
+            onClick={() => {
+              setIsScheduleModalOpen(true);
+            }}
+            className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
           >
-            Learn more.
+            <Calendar className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
           </button>
-        </span>
-      </span>
-      <span
-        className={cn('relative z-20 block text-sm', {
-          hidden: !hasProgress,
-        })}
-      >
-        <span className="relative -top-[0.45px] mr-2 text-xs font-medium uppercase text-yellow-400">
-          Progress
-        </span>
-        <span>{done > $totalRoadmapNodes ? $totalRoadmapNodes : done}</span> of{' '}
-        <span>{$totalRoadmapNodes}</span> Done
-      </span>
-
-      <span
-        className="absolute bottom-0 left-0 top-0 z-10 bg-stone-700"
-        style={{
-          width: `${(done / $totalRoadmapNodes) * 100}%`,
-        }}
-      ></span>
-    </div>
+        )}
+        <button
+          onClick={() => {
+            setIsNudgeHidden(true);
+          }}
+          className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
+        >
+          <X className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+        </button>
+      </div>
+    </>
   );
 }
diff --git a/src/components/ReactIcons/AppleCalendarIcon.tsx b/src/components/ReactIcons/AppleCalendarIcon.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react';
+
+export function AppleCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="1736"
+      height="1693"
+      viewBox="0 0 1736 1693"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="1736" height="1693" fill="#ECEFF1" />
+      <rect x="1" width="1734" height="526" fill="#FF3D00" />
+      <path
+        d="M724.689 300.13L750.665 128H805.4L756.691 401.947H701.224L669.269 240.501L637.587 401.947H581.892L533 128H588.101L613.894 299.947L646.032 128H692.505L724.689 300.13Z"
+        fill="white"
+      />
+      <path
+        d="M976.776 283.419H890.632V356.061H992.617V401.947H835.303V128H992.206V174.069H890.632V238.812H976.776V283.419Z"
+        fill="white"
+      />
+      <path
+        d="M1024.39 401.947V128H1096.84C1128.79 128 1154.31 138.182 1173.3 158.454C1192.29 178.771 1201.97 206.623 1202.34 242.008V286.433C1202.34 322.411 1192.84 350.673 1173.8 371.219C1154.86 391.674 1128.66 401.947 1095.28 401.947H1024.39ZM1079.72 174.069V356.015H1096.29C1114.73 356.015 1127.7 351.175 1135.23 341.45C1142.76 331.725 1146.73 314.969 1147.1 291.135V243.514C1147.1 217.946 1143.49 200.094 1136.37 189.958C1129.2 179.867 1117.06 174.571 1099.85 174.069H1079.72Z"
+        fill="white"
+      />
+      <path
+        d="M831.353 1451.15H380.138V1345.95L587.348 1082.46C613.643 1045.98 632.999 1013.97 645.462 986.442C657.925 958.91 664.133 932.52 664.133 907.271C664.133 873.256 658.29 846.592 646.512 827.324C634.78 808.056 617.843 798.423 595.748 798.423C571.553 798.423 552.379 809.654 538.182 832.072C523.984 854.536 516.863 886.086 516.863 926.767H367.492C367.492 879.785 377.216 836.821 396.663 797.875C416.111 758.929 443.456 728.703 478.698 707.153C513.941 685.556 553.84 674.781 598.35 674.781C666.735 674.781 719.736 693.638 757.444 731.351C795.152 769.065 814.006 822.621 814.006 892.067C814.006 935.168 803.552 978.954 782.735 1023.29C761.872 1067.67 724.073 1122.27 669.383 1187.11L571.051 1327.55H831.353V1451.15Z"
+        fill="#424242"
+      />
+      <path
+        d="M1354.1 888.871C1354.1 926.036 1346.21 959.001 1330.41 987.766C1314.62 1016.53 1292.89 1039.5 1265.22 1056.66C1296.77 1074.56 1321.69 1099.17 1339.91 1130.58C1358.12 1161.95 1367.25 1198.89 1367.25 1241.3C1367.25 1309.33 1347.62 1363.07 1308.36 1402.52C1269.1 1441.97 1215.6 1461.69 1147.94 1461.69C1080.29 1461.69 1026.47 1441.97 986.475 1402.52C946.53 1363.07 926.535 1309.33 926.535 1241.3C926.535 1198.89 935.62 1161.9 953.88 1130.35C972.095 1098.81 997.203 1074.24 1029.11 1056.71C1001.04 1039.54 979.171 1016.58 963.376 987.811C947.58 959.047 939.683 926.128 939.683 888.916C939.683 821.936 958.445 769.521 995.971 731.625C1033.45 693.729 1083.8 674.781 1146.89 674.781C1210.71 674.781 1261.2 693.912 1298.36 732.127C1335.52 770.343 1354.1 822.576 1354.1 888.871ZM1147.94 1338.05C1170.36 1338.05 1187.66 1328.46 1199.76 1309.38C1211.85 1290.29 1217.88 1263.72 1217.88 1229.71C1217.88 1195.69 1211.58 1169.07 1198.94 1149.76C1186.29 1130.45 1168.94 1120.81 1146.89 1120.81C1124.8 1120.81 1107.36 1130.45 1094.58 1149.76C1081.79 1169.07 1075.36 1195.69 1075.36 1229.71C1075.36 1263.72 1081.75 1290.29 1094.58 1309.38C1107.36 1328.51 1125.16 1338.05 1147.94 1338.05ZM1205.78 896.724C1205.78 866.909 1200.94 843.076 1191.31 825.224C1181.68 807.326 1166.89 798.377 1146.89 798.377C1127.95 798.377 1113.57 807.052 1103.8 824.402C1093.98 841.752 1089.05 865.859 1089.05 896.724C1089.05 926.904 1093.98 951.148 1103.8 969.594C1113.61 987.994 1128.31 997.217 1147.94 997.217C1167.57 997.217 1182.14 987.994 1191.59 969.594C1201.04 951.194 1205.78 926.904 1205.78 896.724Z"
+        fill="#424242"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ReactIcons/FileIcon.tsx b/src/components/ReactIcons/FileIcon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+
+export function FileIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z" />
+      <path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z" />
+      <path
+        fill="#1976D2"
+        d="M16 21H33V23H16zM16 25H29V27H16zM16 29H33V31H16zM16 33H29V35H16z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ReactIcons/GoogleCalendarIcon.tsx b/src/components/ReactIcons/GoogleCalendarIcon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from 'react';
+
+export function GoogleCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="100"
+      height="100"
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <rect width="22" height="22" x="13" y="13" fill="#fff"></rect>
+      <polygon
+        fill="#1e88e5"
+        points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616"
+      ></polygon>
+      <path
+        fill="#1e88e5"
+        d="M22.943,23.745c0.625-0.574,1.013-1.37,1.013-2.249c0-1.747-1.533-3.168-3.417-3.168 c-1.602,0-2.972,1.009-3.33,2.453l1.657,0.421c0.165-0.664,0.868-1.146,1.673-1.146c0.942,0,1.709,0.646,1.709,1.44 c0,0.794-0.767,1.44-1.709,1.44h-0.997v1.728h0.997c1.081,0,1.993,0.751,1.993,1.64c0,0.904-0.866,1.64-1.931,1.64 c-0.962,0-1.784-0.61-1.914-1.418L17,26.802c0.262,1.636,1.81,2.87,3.6,2.87c2.007,0,3.64-1.511,3.64-3.368 C24.24,25.281,23.736,24.363,22.943,23.745z"
+      ></path>
+      <polygon
+        fill="#fbc02d"
+        points="34,42 14,42 13,38 14,34 34,34 35,38"
+      ></polygon>
+      <polygon
+        fill="#4caf50"
+        points="38,35 42,34 42,14 38,13 34,14 34,34"
+      ></polygon>
+      <path
+        fill="#1e88e5"
+        d="M34,14l1-4l-1-4H9C7.343,6,6,7.343,6,9v25l4,1l4-1V14H34z"
+      ></path>
+      <polygon fill="#e53935" points="34,34 34,42 42,34"></polygon>
+      <path fill="#1565c0" d="M39,6h-5v8h8V9C42,7.343,40.657,6,39,6z"></path>
+      <path fill="#1565c0" d="M9,42h5v-8H6v5C6,40.657,7.343,42,9,42z"></path>
+    </svg>
+  );
+}
diff --git a/src/components/ReactIcons/OutlookCalendarIcon.tsx b/src/components/ReactIcons/OutlookCalendarIcon.tsx
@@ -0,0 +1,40 @@
+import type { SVGProps } from 'react';
+
+export function OutlookCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path
+        fill="#1976d2"
+        d="M28,13h14.533C43.343,13,44,13.657,44,14.467v19.066C44,34.343,43.343,35,42.533,35H28V13z"
+      />
+      <rect width={14} height="15.542" x={28} y="17.958" fill="#fff" />
+      <polygon fill="#1976d2" points="27,44 4,39.5 4,8.5 27,4" />
+      <path
+        fill="#fff"
+        d="M15.25,16.5c-3.176,0-5.75,3.358-5.75,7.5s2.574,7.5,5.75,7.5S21,28.142,21,24	S18.426,16.5,15.25,16.5z M15,28.5c-1.657,0-3-2.015-3-4.5s1.343-4.5,3-4.5s3,2.015,3,4.5S16.657,28.5,15,28.5z"
+      />
+      <rect width="2.7" height="2.9" x="28.047" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="29.737" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="28.047" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="26.159" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="28.047" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="22.706" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="31.448" y="19.112" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="34.849" y="19.112" fill="#1976d2" />
+      <rect width="2.7" height="2.9" x="38.25" y="19.112" fill="#1976d2" />
+    </svg>
+  );
+}
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
@@ -7,6 +7,7 @@ import {
 } from 'lucide-react';
 import { TabLink } from './TabLink';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
+import { ScheduleButton } from './Schedule/ScheduleButton';
 import ProgressHelpPopup from './ProgressHelpPopup.astro';
 import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
@@ -45,8 +46,6 @@ const roadmapTitle =
   roadmapId === 'devops'
     ? 'DevOps'
     : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
-
-const hasTnsBanner = !!tnsBannerLink;
 ---
 
 <LoginPopup />
@@ -95,6 +94,12 @@ const hasTnsBanner = !!tnsBannerLink;
           className='relative top-px mr-2 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
           client:only='react'
         />
+        <ScheduleButton
+          resourceId={roadmapId}
+          resourceType='roadmap'
+          resourceTitle={title}
+          client:load
+        />
         <DownloadRoadmapButton roadmapId={roadmapId} client:idle />
         <ShareRoadmapButton
           description={description}
@@ -103,11 +108,11 @@ const hasTnsBanner = !!tnsBannerLink;
         />
       </div>
     </div>
-    <div class='mb-5 mt-5 sm:mb-8 sm:mt-5'>
-      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-3xl'>
+    <div class='mb-5 mt-5 sm:mb-12 sm:mt-12'>
+      <h1 class='mb-0.5 text-2xl font-bold sm:mb-3.5 sm:text-5xl'>
         {title}
       </h1>
-      <p class='text-balance text-sm text-gray-500 sm:text-base'>
+      <p class='text-balance text-sm text-gray-500 sm:text-lg'>
         {description}
       </p>
     </div>
@@ -135,6 +140,7 @@ const hasTnsBanner = !!tnsBannerLink;
         text='Suggest Changes'
         isExternal={true}
         hideTextOnMobile={true}
+        isActive={false}
       />
     </div>
   </div>