docs: documentation changes for release (#4300)

* docs: added manage reservations user guide (#4290) * docs: added manage reservations user guide * removed feature flag details * docs: added how-to for custom reservations (#4292) * docs: added how-to for custom reservations * eslint fixes * docs: added product module documentation (#4287) * docs: added product module documentation * added details about optional environment variables * small fixes * Remove reference link * added example usages * added link to sample project * address PR feedback * docs: moved product module guide + added product module tabs (#4307) * added product module tab * adjust design of badge * docs: added onboarding features (#4168) * added marketplace page * added subscription roadmap * added rating for onboarding * added learning path components * small fixes * fix build error * fix eslint errors * change roadmaps to recipes * small change in text * optimize learning path and notifications * fix tracking usage * fix eslint errors * added enter/exit animation * allow starting a path using a query parameter * fix gap between notifications * address vercel comments * fixed links issue * changed create-medusa-app docs steps * move troubleshooting section * improved tracking across docs * fix build errors * remove console * added a note about `boilerplate` option * added troubleshooting section for eagain * added invite option in cli reference * added track event for finished onboarding * update boilerplate option name * redesigned learning path component * docs: added how to create widget docs (#4318) * docs: added how to create widget docs * remove development guide * added types * docs: added details about createCustomAdminHooks (#4288) * docs: added details about createCustomAdminHooks * small improvement * added missing import * small changes * docs: added onboarding guide (#4320) * docs: added how to create widget docs * remove development guide * docs: added onboarding guide * added types * added recipes link * small adjustments * fixed eslint errors * styling fixes * change to singular product module * updated the what's new section * shorten down medusa react card * updated tailwind configurations * fix build error * fix newspaper icon * style fixes * change modal shadow * fix color of line numbers * fix code fade color * docs: updated admin documentations * eslint fixes * text changes * added a note about beta version * remove empty object argument * remove demo repo url * fix selection color for code headers * general fixes * fix eslint error * changed code theme * added preparation step * changes regarding beta version * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> * Update docs/content/modules/products/serverless-module.md Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> --------- Co-authored-by: Riqwan Thamir <rmthamir@gmail.com> Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
2023-06-20 13:25:22 +03:00
parent 8db03619b5
commit 76c4bf4acb
177 changed files with 8828 additions and 1196 deletions
--- a/www/docs/src/components/LearningPath/Finish/index.tsx
+++ b/www/docs/src/components/LearningPath/Finish/index.tsx
@@ -0,0 +1,42 @@
+import { LearningPathStepType } from "@site/src/providers/LearningPath"
+import React from "react"
+import Rating from "../../Rating"
+
+export type LearningPathFinishType =
+  | {
+      type: "rating"
+      step: Omit<LearningPathStepType, "descriptionJSX"> & {
+        eventName?: string
+      }
+    }
+  | {
+      type: "custom"
+      step: LearningPathStepType & {
+        descriptionJSX: JSX.Element
+      }
+    }
+
+type LearningPathFinishProps = LearningPathFinishType & {
+  onRating?: () => void
+}
+
+const LearningPathFinish: React.FC<LearningPathFinishProps> = ({
+  type,
+  step,
+  onRating,
+}) => {
+  return (
+    <>
+      {type === "rating" && (
+        <Rating event={step.eventName} onRating={onRating} />
+      )}
+      {type === "custom" && (
+        <span className="tw-text-label-small tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark">
+          {step.descriptionJSX}
+        </span>
+      )}
+    </>
+  )
+}
+
+export default LearningPathFinish
--- a/www/docs/src/components/LearningPath/Icon/index.tsx
+++ b/www/docs/src/components/LearningPath/Icon/index.tsx
@@ -0,0 +1,33 @@
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import clsx from "clsx"
+import React from "react"
+
+type LearningPathIconProps = {
+  className?: string
+  imgClassName?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathIcon: React.FC<LearningPathIconProps> = ({
+  className = "",
+  imgClassName = "",
+}) => {
+  return (
+    <div
+      className={clsx(
+        "tw-rounded-full tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-w-3 tw-h-3 tw-bg-button-neutral dark:tw-bg-button-neutral-dark",
+        "tw-flex tw-justify-center tw-items-center tw-flex-none",
+        className
+      )}
+    >
+      <img
+        src={useBaseUrl("/img/learning-path-img.png")}
+        className={clsx(
+          "tw-rounded-full tw-w-[40px] tw-h-[40px] no-zoom-img",
+          imgClassName
+        )}
+      />
+    </div>
+  )
+}
+
+export default LearningPathIcon
--- a/www/docs/src/components/LearningPath/Steps/Actions/index.tsx
+++ b/www/docs/src/components/LearningPath/Steps/Actions/index.tsx
@@ -0,0 +1,41 @@
+import Button from "@site/src/components/Button"
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import React from "react"
+
+type LearningPathStepActionsType = {
+  onFinish?: () => void
+  onClose?: () => void
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
+  onFinish,
+  onClose,
+}) => {
+  const { hasNextStep, nextStep, endPath } = useLearningPath()
+
+  const handleFinish = () => {
+    if (onFinish) {
+      onFinish()
+    } else {
+      endPath()
+    }
+  }
+
+  return (
+    <div className="tw-flex tw-gap-0.5 tw-p-1 tw-justify-end tw-items-center">
+      <Button onClick={onClose}>Close</Button>
+      {hasNextStep() && (
+        <Button onClick={nextStep} btnTypeClassName="btn-inverted">
+          Next
+        </Button>
+      )}
+      {!hasNextStep() && (
+        <Button onClick={handleFinish} btnTypeClassName="btn-inverted">
+          Finish
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default LearningPathStepActions
--- a/www/docs/src/components/LearningPath/Steps/index.tsx
+++ b/www/docs/src/components/LearningPath/Steps/index.tsx
@@ -0,0 +1,84 @@
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import React from "react"
+import LearningPathStepActions from "./Actions"
+import clsx from "clsx"
+import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine"
+import IconCheckCircleSolid from "@site/src/theme/Icon/CheckCircleSolid"
+import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid"
+import Link from "@docusaurus/Link"
+
+type LearningPathStepsProps = {
+  onFinish?: () => void
+  onClose?: () => void
+}
+
+const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
+  const { path, currentStep, goToStep } = useLearningPath()
+
+  if (!path) {
+    return <></>
+  }
+
+  return (
+    <div>
+      {path.steps.map((step, index) => (
+        <div
+          className={clsx(
+            "tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
+            "tw-relative tw-p-1"
+          )}
+          key={index}
+        >
+          <div className={clsx("tw-flex tw-items-center tw-gap-1")}>
+            <div className="tw-w-2 tw-flex-none tw-flex tw-items-center tw-justify-center">
+              {index === currentStep && (
+                <IconCircleDottedLine
+                  className="tw-shadow-active dark:tw-shadow-active-dark tw-rounded-full"
+                  iconColorClassName="tw-stroke-medusa-icon-interactive dark:tw-stroke-medusa-icon-interactive-dark"
+                />
+              )}
+              {index < currentStep && (
+                <IconCheckCircleSolid iconColorClassName="tw-fill-medusa-icon-interactive dark:tw-fill-medusa-icon-interactive-dark" />
+              )}
+              {index > currentStep && <IconCircleMiniSolid />}
+            </div>
+            <span
+              className={clsx(
+                "tw-text-label-regular-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark"
+              )}
+            >
+              {step.title}
+            </span>
+          </div>
+          {index === currentStep && (
+            <div className={clsx("tw-flex tw-items-center tw-gap-1")}>
+              <div className="tw-w-2 tw-flex-none"></div>
+              <div
+                className={clsx(
+                  "tw-text-body-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-mt-1"
+                )}
+              >
+                {step.descriptionJSX ?? step.description}
+              </div>
+            </div>
+          )}
+          {index < currentStep && (
+            <Link
+              href={step.path}
+              className={clsx(
+                "tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full"
+              )}
+              onClick={(e) => {
+                e.preventDefault()
+                goToStep(index)
+              }}
+            />
+          )}
+        </div>
+      ))}
+      <LearningPathStepActions {...rest} />
+    </div>
+  )
+}
+
+export default LearningPathSteps
--- a/www/docs/src/components/LearningPath/index.tsx
+++ b/www/docs/src/components/LearningPath/index.tsx
@@ -0,0 +1,96 @@
+import { useLearningPath } from "@site/src/providers/LearningPath"
+import { useNotifications } from "@site/src/providers/NotificationProvider"
+import { getLearningPath } from "@site/src/utils/learning-paths"
+import clsx from "clsx"
+import React from "react"
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import Button from "../Button"
+import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid"
+import LearningPathIcon from "./Icon"
+
+type LearningPathProps = {
+  pathName: string
+  className?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+const LearningPath: React.FC<LearningPathProps> = ({
+  pathName,
+  className = "",
+}) => {
+  const path = getLearningPath(pathName)
+  if (!path) {
+    throw new Error("Learning path does not exist.")
+  }
+  const { startPath, path: currentPath } = useLearningPath()
+  const notificationContext = useNotifications()
+
+  const handleClick = () => {
+    if (notificationContext && currentPath?.notificationId) {
+      notificationContext.removeNotification(currentPath.notificationId)
+    }
+    startPath(path)
+  }
+
+  return (
+    <div
+      className={clsx(
+        "tw-rounded tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark tw-mt-1.5 tw-mb-4",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "tw-flex tw-items-center tw-gap-1 tw-p-1 tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
+        )}
+      >
+        <LearningPathIcon />
+        <div className={clsx("tw-flex-auto")}>
+          <span
+            className={clsx(
+              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-large-plus tw-block"
+            )}
+          >
+            {path.label}
+          </span>
+          {path.description && (
+            <span
+              className={clsx(
+                "tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-text-label-regular tw-mt-[4px] tw-inline-block"
+              )}
+            >
+              {path.description}
+            </span>
+          )}
+        </div>
+        <Button onClick={handleClick} className={clsx("tw-flex-initial")}>
+          Start Path
+        </Button>
+      </div>
+      {path.steps.map((step, index) => (
+        <div
+          className={clsx(
+            "tw-flex tw-items-center tw-p-1 tw-gap-1",
+            index !== path.steps.length - 1 &&
+              "tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
+          )}
+          key={index}
+        >
+          <div
+            className={clsx("tw-w-3 tw-flex tw-items-center tw-justify-center")}
+          >
+            <IconCircleMiniSolid iconColorClassName="tw-stroke-medusa-icon-muted dark:tw-stroke-medusa-icon-muted-dark" />
+          </div>
+          <span
+            className={clsx(
+              "tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus"
+            )}
+          >
+            {step.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default LearningPath