Skip to content

Commit

Permalink
Merge branch 'develop' into feat/translate-uk
Browse files Browse the repository at this point in the history
  • Loading branch information
@olivermrbl
olivermrbl authored Oct 26, 2023
2 parents 8f01865 + 7f9c4de commit ab9c65a
Show file tree
Hide file tree
Showing 9 changed files with 231 additions and 164 deletions.
41 changes: 30 additions & 11 deletions www/apps/docs/src/components/LearningPath/Steps/Actions/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
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>

const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
onFinish,
onClose,
setCollapsed,
}) => {
const { hasNextStep, nextStep, endPath } = useLearningPath()

Expand All @@ -22,18 +25,34 @@ const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
}

return (
<div className="flex gap-0.5 p-1 justify-end items-center">
<Button onClick={onClose}>Close</Button>
{hasNextStep() && (
<Button onClick={nextStep} variant="primary">
Next
<div className="flex p-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>
)}
{!hasNextStep() && (
<Button onClick={handleFinish} variant="primary">
Finish
</Button>
)}
</div>
<div className="flex gap-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>
)
}
Expand Down
180 changes: 128 additions & 52 deletions www/apps/docs/src/components/LearningPath/Steps/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useLearningPath } from "@site/src/providers/LearningPath"
import React from "react"
import React, { useCallback, useEffect, useRef, useState } from "react"
import LearningPathStepActions from "./Actions"
import clsx from "clsx"
import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine"
import Link from "@docusaurus/Link"
import { CheckCircleSolid, CircleMiniSolid } from "@medusajs/icons"
import { CheckCircleSolid, CircleMiniSolid, ListBullet } from "@medusajs/icons"
import { Badge, Button } from "docs-ui"
import { CSSTransition, SwitchTransition } from "react-transition-group"

type LearningPathStepsProps = {
onFinish?: () => void
Expand All @@ -13,66 +15,140 @@ type LearningPathStepsProps = {

const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
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 (
<>
<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-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
<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(
"shadow-active dark:shadow-active-dark rounded-full",
"!text-ui-fg-interactive"
"border-0 border-b border-solid border-medusa-border-base",
"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={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>
</div>
{index === currentStep && (
<div className={clsx("flex items-center gap-1")}>
<div className="w-2 flex-none"></div>
<div
className={clsx("text-medium text-ui-fg-subtle mt-1")}
>
{step.descriptionJSX ?? step.description}
</div>
</div>
)}
/>
)}
{index < currentStep && (
<CheckCircleSolid className="text-ui-fg-interactive" />
)}
{index > currentStep && (
<CircleMiniSolid className="text-ui-fg-subtle" />
)}
<Link
href={step.path}
className={clsx("absolute top-0 left-0 w-full h-full")}
onClick={(e) => {
e.preventDefault()
goToStep(index)
}}
/>
</div>
))}
</div>
<span
className={clsx("text-compact-medium-plus text-medusa-fg-base")}
>
{step.title}
</span>
<LearningPathStepActions setCollapsed={setCollapsed} {...rest} />
</div>
{index === currentStep && (
<div className={clsx("flex items-center gap-1")}>
<div className="w-2 flex-none"></div>
<div className={clsx("text-medium text-ui-fg-subtle mt-1")}>
{step.descriptionJSX ?? step.description}
</div>
</div>
)}
<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} />
</>
)}
{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-1 max-[767px]:right-1 "
)}
onClick={() => setCollapsed(false)}
buttonRef={buttonRef}
>
<ListBullet />
<Badge
variant="blue"
className={clsx("absolute -top-0.25 -right-0.25")}
>
!
</Badge>
</Button>
)}
</>
</CSSTransition>
</SwitchTransition>
)
}

Expand Down
93 changes: 0 additions & 93 deletions www/apps/docs/src/hooks/use-select.tsx
View file

This file was deleted.

6 changes: 5 additions & 1 deletion www/apps/docs/src/providers/DocsProviders/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useThemeConfig } from "@docusaurus/theme-common"
import { ThemeConfig } from "@medusajs/docs"
import SearchProvider from "../Search"
import LearningPathProvider from "../LearningPath"
import SkipToContent from "@theme/SkipToContent"

type DocsProvidersProps = {
children?: React.ReactNode
Expand All @@ -25,7 +26,10 @@ const DocsProviders = ({ children }: DocsProvidersProps) => {
<ModalProvider>
<SearchProvider>
<LearningPathProvider>
<NotificationProvider>{children}</NotificationProvider>
<NotificationProvider>
<SkipToContent />
{children}
</NotificationProvider>
</LearningPathProvider>
</SearchProvider>
</ModalProvider>
Expand Down
Loading

0 comments on commit ab9c65a

Please sign in to comment.