docs: added new recipes (#4793)

* added new recipes

* added more recipes

www/docs/src/components/LearningPath/List/index.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react"
+import { getLearningPaths } from "../../../utils/learning-paths"
+import LearningPath from ".."
+
+type LearningPathListProps = {
+  ignore?: string[]
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathList: React.FC<LearningPathListProps> = ({ ignore = [] }) => {
+  const paths = useMemo(() => {
+    const paths = getLearningPaths()
+    ignore.forEach((pathName) => {
+      const pathIndex = paths.findIndex((path) => path.name === pathName)
+      if (pathIndex !== -1) {
+        paths.splice(pathIndex, 1)
+      }
+    })
+
+    return paths
+  }, [ignore])
+
+  return (
+    <div className="flex flex-col flex-wrap gap-2 mt-1.5">
+      {paths.map((path, index) => (
+        <LearningPath
+          pathName={path.name}
+          key={index}
+          className="!mt-0 !mb-0"
+        />
+      ))}
+    </div>
+  )
+}
+
+export default LearningPathList

www/docs/src/components/LearningPath/Steps/index.tsx

@@ -20,62 +20,64 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
   }
 
   return (
-    <div>
-      {path.steps.map((step, index) => (
-        <div
-          className={clsx(
-            "border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
-            "relative p-1"
-          )}
-          key={index}
-        >
-          <div className={clsx("flex items-center gap-1")}>
-            <div className="w-2 flex-none flex items-center justify-center">
-              {index === currentStep && (
-                <IconCircleDottedLine
-                  className="shadow-active dark:shadow-active-dark rounded-full"
-                  iconColorClassName="stroke-medusa-fg-interactive dark:stroke-medusa-fg-interactive-dark"
-                />
-              )}
-              {index < currentStep && (
-                <IconCheckCircleSolid iconColorClassName="fill-medusa-fg-interactive dark:fill-medusa-fg-interactive-dark" />
-              )}
-              {index > currentStep && <IconCircleMiniSolid />}
-            </div>
-            <span
-              className={clsx(
-                "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
-              )}
-            >
-              {step.title}
-            </span>
-          </div>
-          {index === currentStep && (
+    <>
+      <div className="overflow-auto basis-3/4">
+        {path.steps.map((step, index) => (
+          <div
+            className={clsx(
+              "border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+              "relative p-1"
+            )}
+            key={index}
+          >
             <div className={clsx("flex items-center gap-1")}>
-              <div className="w-2 flex-none"></div>
-              <div
+              <div className="w-2 flex-none flex items-center justify-center">
+                {index === currentStep && (
+                  <IconCircleDottedLine
+                    className="shadow-active dark:shadow-active-dark rounded-full"
+                    iconColorClassName="stroke-medusa-fg-interactive dark:stroke-medusa-fg-interactive-dark"
+                  />
+                )}
+                {index < currentStep && (
+                  <IconCheckCircleSolid iconColorClassName="fill-medusa-fg-interactive dark:fill-medusa-fg-interactive-dark" />
+                )}
+                {index > currentStep && <IconCircleMiniSolid />}
+              </div>
+              <span
                 className={clsx(
-                  "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mt-1"
+                  "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
                 )}
               >
-                {step.descriptionJSX ?? step.description}
-              </div>
+                {step.title}
+              </span>
             </div>
-          )}
-          {index < currentStep && (
-            <Link
-              href={step.path}
-              className={clsx("absolute top-0 left-0 w-full h-full")}
-              onClick={(e) => {
-                e.preventDefault()
-                goToStep(index)
-              }}
-            />
-          )}
-        </div>
-      ))}
+            {index === currentStep && (
+              <div className={clsx("flex items-center gap-1")}>
+                <div className="w-2 flex-none"></div>
+                <div
+                  className={clsx(
+                    "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mt-1"
+                  )}
+                >
+                  {step.descriptionJSX ?? step.description}
+                </div>
+              </div>
+            )}
+            {index < currentStep && (
+              <Link
+                href={step.path}
+                className={clsx("absolute top-0 left-0 w-full h-full")}
+                onClick={(e) => {
+                  e.preventDefault()
+                  goToStep(index)
+                }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
       <LearningPathStepActions {...rest} />
-    </div>
+    </>
   )
 }
 

www/docs/src/components/LearningPath/index.tsx

@@ -18,7 +18,7 @@ const LearningPath: React.FC<LearningPathProps> = ({
 }) => {
   const path = getLearningPath(pathName)
   if (!path) {
-    throw new Error("Learning path does not exist.")
+    throw new Error(`Learning path ${pathName} does not exist.`)
   }
   const { startPath, path: currentPath } = useLearningPath()
   const notificationContext = useNotifications()
@@ -43,7 +43,7 @@ const LearningPath: React.FC<LearningPathProps> = ({
         )}
       >
         <LearningPathIcon />
-        <div className={clsx("flex-auto")}>
+        <div className={clsx("basis-3/4")}>
           <span
             className={clsx(
               "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-large-plus block"
@@ -61,7 +61,7 @@ const LearningPath: React.FC<LearningPathProps> = ({
             </span>
           )}
         </div>
-        <Button onClick={handleClick} className={clsx("flex-initial")}>
+        <Button onClick={handleClick} className={clsx("basis-1/4 max-w-fit")}>
           Start Path
         </Button>
       </div>

www/docs/src/components/Notification/Container/index.tsx

@@ -48,11 +48,11 @@ const NotificationContainer = () => {
     <>
       {renderFilteredNotifications(
         (notification) => notification.placement === "top",
-        "flex fixed flex-col gap-0.5 md:right-1 right-0 md:top-1 top-0 z-[400] md:w-auto w-full"
+        "flex fixed flex-col gap-0.5 right-0 top-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
       )}
       {renderFilteredNotifications(
         (notification) => notification.placement !== "top",
-        "flex flex-col gap-0.5 fixed md:right-1 right-0 md:bottom-1 bottom-0 z-[400] md:w-auto w-full"
+        "flex flex-col gap-0.5 fixed right-0 bottom-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
       )}
     </>
   )

www/docs/src/components/Notification/Item/index.tsx

@@ -36,8 +36,8 @@ const Notification = ({
     <div
       className={clsx(
         "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded",
-        "shadow-flyout dark:shadow-flyout-dark",
-        "fixed md:right-1 left-0 block z-[400]",
+        "shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
+        "fixed md:right-1 left-0 z-[400] md:m-1",
         placement === "bottom" && "md:bottom-1 bottom-0",
         placement === "top" && "md:top-1 top-0",
         "opacity-100 transition-opacity duration-200 ease-ease",