docs: prep for v2 documentation (#6710)
This PR includes documentation that preps for v2 docs (but doesn't introduce new docs). _Note: The number of file changes in the PR is due to find-and-replace within the `references` which is unavoidable. Let me know if I should move it to another PR._ ## Changes - Change Medusa version in base OAS used for v2. - Fix to docblock generator related to not catching all path parameters. - Added typedoc plugin that generates ER Diagrams, which will be used specifically for data model references in commerce modules. - Changed OAS tool to output references in `www/apps/api-reference/specs-v2` directory when the `--v2` option is used. - Added a version switcher to the API reference to switch between V1 and V2. This switcher is enabled by an environment variable, so it won't be visible/usable at the moment. - Upgraded docusaurus to v3.0.1 - Added new Vale rules to ensure correct spelling of Medusa Admin and module names. - Added new components to the `docs-ui` package that will be used in future documentation changes.
This commit is contained in:
Shahed Nasser
GitHub
@@ -0,0 +1,58 @@
|
||||
import React from "react"
|
||||
import { useLearningPath } from "../../../../providers/LearningPath"
|
||||
import { Button } from "docs-ui"
|
||||
import { ArrowDownLeftMini, ArrowDownMini } from "@medusajs/icons"
|
||||
|
||||
type LearningPathStepActionsType = {
|
||||
onFinish?: () => void
|
||||
onClose?: () => void
|
||||
setCollapsed: React.Dispatch<React.SetStateAction<boolean>>
|
||||
} & React.AllHTMLAttributes<HTMLDivElement>
|
||||
|
||||
export const LearningPathStepActions = ({
|
||||
onFinish,
|
||||
onClose,
|
||||
setCollapsed,
|
||||
}: LearningPathStepActionsType) => {
|
||||
const { hasNextStep, nextStep, endPath } = useLearningPath()
|
||||
|
||||
const handleFinish = () => {
|
||||
if (onFinish) {
|
||||
onFinish()
|
||||
} else {
|
||||
endPath()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex p-docs_1 justify-between items-center">
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => setCollapsed(true)}
|
||||
variant="secondary"
|
||||
className="!text-medusa-fg-subtle !p-[6px]"
|
||||
>
|
||||
<ArrowDownLeftMini className="flip-y hidden md:inline" />
|
||||
<ArrowDownMini className="inline md:hidden" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-docs_0.5 items-center">
|
||||
{hasNextStep() && (
|
||||
<>
|
||||
<Button onClick={onClose} variant="secondary">
|
||||
Close
|
||||
</Button>
|
||||
<Button onClick={nextStep} variant="primary">
|
||||
Next
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{!hasNextStep() && (
|
||||
<Button onClick={handleFinish} variant="primary">
|
||||
Finish
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import { useLearningPath } from "@/providers"
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { LearningPathStepActions } from "./Actions"
|
||||
import clsx from "clsx"
|
||||
import { IconCircleDottedLine } from "@/components/Icons"
|
||||
import { CheckCircleSolid, CircleMiniSolid, ListBullet } from "@medusajs/icons"
|
||||
import { Badge, Button, Link } from "@/components"
|
||||
import { CSSTransition, SwitchTransition } from "react-transition-group"
|
||||
|
||||
type LearningPathStepsProps = {
|
||||
onFinish?: () => void
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
export const LearningPathSteps = ({ ...rest }: LearningPathStepsProps) => {
|
||||
const { path, currentStep, goToStep } = useLearningPath()
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
const stepsRef = useRef<HTMLDivElement>(null)
|
||||
const buttonRef = useRef<HTMLButtonElement>(null)
|
||||
const nodeRef: React.RefObject<HTMLElement> = collapsed ? buttonRef : stepsRef
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (window.scrollY > 100 && !collapsed) {
|
||||
// automatically collapse steps
|
||||
setCollapsed(true)
|
||||
} else if (
|
||||
(window.scrollY === 0 ||
|
||||
window.scrollY + window.innerHeight >= document.body.scrollHeight) &&
|
||||
collapsed
|
||||
) {
|
||||
// automatically open steps
|
||||
setCollapsed(false)
|
||||
}
|
||||
}, [collapsed])
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll)
|
||||
}
|
||||
}, [handleScroll])
|
||||
|
||||
if (!path) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
return (
|
||||
<SwitchTransition>
|
||||
<CSSTransition
|
||||
key={collapsed ? "show_path" : "show_button"}
|
||||
nodeRef={nodeRef}
|
||||
timeout={300}
|
||||
addEndListener={(done) => {
|
||||
nodeRef.current?.addEventListener("transitionend", done, false)
|
||||
}}
|
||||
classNames={{
|
||||
enter: "animate-maximize animate-fast",
|
||||
exit: "animate-minimize animate-fast",
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{!collapsed && (
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-medusa-bg-base shadow-flyout dark:shadow-flyout-dark rounded",
|
||||
"transition-transform origin-bottom-right flex flex-col"
|
||||
)}
|
||||
ref={stepsRef}
|
||||
>
|
||||
<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",
|
||||
"relative p-docs_1"
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
<div
|
||||
className={clsx("flex items-center gap-docs_1 relative")}
|
||||
>
|
||||
<div className="w-docs_2 flex-none flex items-center justify-center">
|
||||
{index === currentStep && (
|
||||
<IconCircleDottedLine
|
||||
className={clsx(
|
||||
"shadow-active dark:shadow-active-dark rounded-full",
|
||||
"!text-ui-fg-interactive"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{index < currentStep && (
|
||||
<CheckCircleSolid className="text-ui-fg-interactive" />
|
||||
)}
|
||||
{index > currentStep && (
|
||||
<CircleMiniSolid className="text-ui-fg-subtle" />
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={clsx(
|
||||
"text-compact-medium-plus text-medusa-fg-base"
|
||||
)}
|
||||
>
|
||||
{step.title}
|
||||
</span>
|
||||
<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-docs_1")}>
|
||||
<div className="w-docs_2 flex-none"></div>
|
||||
<div
|
||||
className={clsx(
|
||||
"text-medium text-ui-fg-subtle mt-docs_1"
|
||||
)}
|
||||
>
|
||||
{step.descriptionJSX ?? step.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<LearningPathStepActions setCollapsed={setCollapsed} {...rest} />
|
||||
</div>
|
||||
)}
|
||||
{collapsed && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
className={clsx(
|
||||
"!p-[10px] !shadow-flyout dark:!shadow-flyout-dark !text-medusa-fg-subtle w-fit h-fit",
|
||||
"rounded-full border-0 mr-0 ml-auto fixed md:relative max-[767px]:bottom-docs_1 max-[767px]:right-docs_1 "
|
||||
)}
|
||||
onClick={() => setCollapsed(false)}
|
||||
buttonRef={buttonRef}
|
||||
>
|
||||
<ListBullet />
|
||||
<Badge
|
||||
variant="blue"
|
||||
className={clsx("absolute -top-docs_0.25 -right-docs_0.25")}
|
||||
>
|
||||
!
|
||||
</Badge>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
</CSSTransition>
|
||||
</SwitchTransition>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user