docs-util: add support for workflows in markdown theme (#8485)

* add template for workflows * initial changes * added support for parallel steps * added support for when * added merge options * fix merge options * fix to tooltip * clean up * remove redirects * fixes * theme fixes + added merge options * generate hook examples + fixes * changed namespaces * add custom autogenerator * change type of additional data
2024-08-09 16:35:52 +03:00
parent 79b49c1288
commit a19c562bec
58 changed files with 2098 additions and 328 deletions
@@ -0,0 +1,19 @@
+import React from "react"
+
+export const WorkflowDiagramArrowEnd = () => {
+  return (
+    <svg
+      width="22"
+      height="38"
+      viewBox="0 0 22 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="-mt-[6px]"
+    >
+      <path
+        d="M21.5284 32.5303C21.8213 32.2374 21.8213 31.7626 21.5284 31.4697L16.7554 26.6967C16.4625 26.4038 15.9876 26.4038 15.6947 26.6967C15.4019 26.9896 15.4019 27.4645 15.6947 27.7574L19.9374 32L15.6947 36.2426C15.4019 36.5355 15.4019 37.0104 15.6947 37.3033C15.9876 37.5962 16.4625 37.5962 16.7554 37.3033L21.5284 32.5303ZM0.249878 0L0.249878 28H1.74988L1.74988 0H0.249878ZM4.99988 32.75L20.998 32.75V31.25L4.99988 31.25V32.75ZM0.249878 28C0.249878 30.6234 2.37653 32.75 4.99988 32.75V31.25C3.20495 31.25 1.74988 29.7949 1.74988 28H0.249878Z"
+        fill="var(--docs-border-strong)"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,18 @@
+import React from "react"
+
+export const WorkflowDiagramArrowHorizontal = () => {
+  return (
+    <svg
+      width="42"
+      height="12"
+      viewBox="0 0 42 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M41.5303 6.53033C41.8232 6.23744 41.8232 5.76256 41.5303 5.46967L36.7574 0.696699C36.4645 0.403806 35.9896 0.403806 35.6967 0.696699C35.4038 0.989593 35.4038 1.46447 35.6967 1.75736L39.9393 6L35.6967 10.2426C35.4038 10.5355 35.4038 11.0104 35.6967 11.3033C35.9896 11.5962 36.4645 11.5962 36.7574 11.3033L41.5303 6.53033ZM0.999996 5.25C0.585785 5.25 0.249996 5.58579 0.249996 6C0.249996 6.41421 0.585785 6.75 0.999996 6.75V5.25ZM41 5.25L0.999996 5.25V6.75L41 6.75V5.25Z"
+        fill="var(--docs-border-strong)"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,19 @@
+import React from "react"
+
+export const WorkflowDiagramArrowMiddle = () => {
+  return (
+    <svg
+      width="22"
+      height="38"
+      viewBox="0 0 22 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="-mt-[6px]"
+    >
+      <path
+        d="M0.999878 32H0.249878V32.75H0.999878V32ZM21.5284 32.5303C21.8213 32.2374 21.8213 31.7626 21.5284 31.4697L16.7554 26.6967C16.4625 26.4038 15.9876 26.4038 15.6947 26.6967C15.4019 26.9896 15.4019 27.4645 15.6947 27.7574L19.9374 32L15.6947 36.2426C15.4019 36.5355 15.4019 37.0104 15.6947 37.3033C15.9876 37.5962 16.4625 37.5962 16.7554 37.3033L21.5284 32.5303ZM0.249878 0L0.249878 32H1.74988L1.74988 0H0.249878ZM0.999878 32.75L20.998 32.75V31.25L0.999878 31.25V32.75Z"
+        fill="var(--docs-border-strong)"
+      />
+    </svg>
+  )
+}
@@ -0,0 +1,35 @@
+import React from "react"
+import { WorkflowDiagramArrowHorizontal } from "./Horizontal"
+import { WorkflowDiagramArrowEnd } from "./End"
+import { WorkflowDiagramArrowMiddle } from "./Middle"
+
+export type WorkflowDiagramArrowProps = {
+  depth: number
+}
+
+export const WorkflowDiagramArrow = ({ depth }: WorkflowDiagramArrowProps) => {
+  if (depth === 1) {
+    return <WorkflowDiagramArrowHorizontal />
+  }
+
+  if (depth === 2) {
+    return (
+      <div className="flex flex-col items-end">
+        <WorkflowDiagramArrowHorizontal />
+        <WorkflowDiagramArrowEnd />
+      </div>
+    )
+  }
+
+  const inbetween = Array.from({ length: depth - 2 }).map((_, index) => (
+    <WorkflowDiagramArrowMiddle key={index} />
+  ))
+
+  return (
+    <div className="flex flex-col items-end">
+      <WorkflowDiagramArrowHorizontal />
+      {inbetween}
+      <WorkflowDiagramArrowEnd />
+    </div>
+  )
+}
@@ -0,0 +1,27 @@
+"use client"
+
+import React from "react"
+import { WorkflowStepUi } from "types"
+import { WorkflowDiagramStepNode } from "../Node"
+import { WorkflowDiagramLine } from "../Line"
+
+export type WorkflowDiagramDepthProps = {
+  cluster: WorkflowStepUi[]
+  next: WorkflowStepUi[]
+}
+
+export const WorkflowDiagramDepth = ({
+  cluster,
+  next,
+}: WorkflowDiagramDepthProps) => {
+  return (
+    <div className="flex items-start">
+      <div className="flex flex-col justify-center gap-y-docs_0.5">
+        {cluster.map((step) => (
+          <WorkflowDiagramStepNode key={step.name} step={step} />
+        ))}
+      </div>
+      <WorkflowDiagramLine step={next} />
+    </div>
+  )
+}
@@ -0,0 +1,26 @@
+import React from "react"
+import { WorkflowDiagramArrow } from "../Arrow"
+import { WorkflowStepUi } from "types"
+
+export type WorkflowDiagramLineProps = {
+  step: WorkflowStepUi[]
+}
+
+export const WorkflowDiagramLine = ({ step }: WorkflowDiagramLineProps) => {
+  if (!step) {
+    return <></>
+  }
+
+  return (
+    <div className="ml-0 -mr-[7px] w-[60px] pr-[7px]">
+      <div className="flex min-h-[24px] w-full items-start">
+        <div className="flex h-docs_1.5 w-[10px] items-center justify-center">
+          <div className="bg-medusa-button-neutral shadow-borders-base size-[10px] shrink-0 rounded-full" />
+        </div>
+        <div className="pt-[6px]">
+          <WorkflowDiagramArrow depth={step.length} />
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,76 @@
+"use client"
+
+import { Text } from "@medusajs/ui"
+import clsx from "clsx"
+import Link from "next/link"
+import React from "react"
+import { WorkflowStepUi } from "types"
+import { InlineCode, MarkdownContent, Tooltip } from "../../.."
+import { Bolt, InformationCircle } from "@medusajs/icons"
+
+export type WorkflowDiagramNodeProps = {
+  step: WorkflowStepUi
+}
+
+export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
+  const stepId = step.name.split(".").pop()
+
+  return (
+    <Tooltip
+      tooltipClassName="!text-left max-w-full text-pretty overflow-scroll"
+      tooltipChildren={
+        <>
+          <h4 className="text-compact-x-small-plus">{step.name}</h4>
+          {step.when && (
+            <span className="block py-docs_0.25">
+              Runs only if a <InlineCode>when</InlineCode> condition is
+              satisfied.
+            </span>
+          )}
+          {step.description && (
+            <MarkdownContent
+              allowedElements={["a", "strong", "code"]}
+              unwrapDisallowed={true}
+            >
+              {step.description}
+            </MarkdownContent>
+          )}
+        </>
+      }
+      clickable={true}
+    >
+      <Link
+        href={step.link || `#${step.name}`}
+        className="focus-visible:shadow-borders-focus transition-fg rounded-docs_sm outline-none"
+      >
+        <div
+          className={clsx(
+            "shadow-borders-base flex min-w-[120px] bg-medusa-bg-base",
+            "items-center rounded-docs_sm py-docs_0.125 px-docs_0.5",
+            (step.type === "hook" || step.when) && "gap-x-docs_0.125"
+          )}
+          data-step-id={step.name}
+        >
+          {step.type === "hook" && (
+            <div className="flex size-[20px] items-center justify-center text-medusa-tag-orange-icon">
+              <Bolt />
+            </div>
+          )}
+          {step.when && (
+            <div className="flex size-[20px] items-center justify-center text-medusa-tag-green-icon">
+              <InformationCircle />
+            </div>
+          )}
+          <Text
+            size="xsmall"
+            leading="compact"
+            weight="plus"
+            className="select-none"
+          >
+            {stepId}
+          </Text>
+        </div>
+      </Link>
+    </Tooltip>
+  )
+}
@@ -0,0 +1,218 @@
+"use client"
+
+import clsx from "clsx"
+import {
+  useAnimationControls,
+  useDragControls,
+  useMotionValue,
+  motion,
+} from "framer-motion"
+import React, { Suspense, useEffect, useRef, useState } from "react"
+import { ArrowPathMini, MinusMini, PlusMini } from "@medusajs/icons"
+import { DropdownMenu, Text } from "@medusajs/ui"
+import { createNodeClusters, getNextCluster } from "../../utils"
+import { Workflow } from "types"
+import { WorkflowDiagramDepth } from "./Depth"
+import { Loading } from "../.."
+
+export type WorkflowDiagramProps = {
+  workflow: Workflow
+}
+
+type ZoomScale = 0.5 | 0.75 | 1
+
+const defaultState = {
+  x: -1000,
+  y: -1020,
+  scale: 1,
+}
+
+const MAX_ZOOM = 1.5
+const MIN_ZOOM = 0.5
+const ZOOM_STEP = 0.25
+
+const WorkflowDiagramContent = ({ workflow }: WorkflowDiagramProps) => {
+  const [zoom, setZoom] = useState<number>(1)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const scale = useMotionValue(defaultState.scale)
+  const x = useMotionValue(defaultState.x)
+  const y = useMotionValue(defaultState.y)
+
+  const controls = useAnimationControls()
+
+  const dragControls = useDragControls()
+  const dragConstraints = useRef<HTMLDivElement>(null)
+
+  const canZoomIn = zoom < MAX_ZOOM
+  const canZoomOut = zoom > MIN_ZOOM
+
+  useEffect(() => {
+    const unsubscribe = scale.on("change", (latest) => {
+      setZoom(latest as ZoomScale)
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [scale])
+
+  // TODO pass steps here.
+  const clusters = createNodeClusters(workflow.steps)
+
+  function scaleXandY(
+    prevScale: number,
+    newScale: number,
+    x: number,
+    y: number
+  ) {
+    const scaleRatio = newScale / prevScale
+    return {
+      x: x * scaleRatio,
+      y: y * scaleRatio,
+    }
+  }
+
+  const changeZoom = (newScale: number) => {
+    const { x: newX, y: newY } = scaleXandY(zoom, newScale, x.get(), y.get())
+
+    setZoom(newScale)
+    controls.set({ scale: newScale, x: newX, y: newY })
+  }
+
+  const zoomIn = () => {
+    const curr = scale.get()
+
+    if (curr < 1.5) {
+      const newScale = curr + ZOOM_STEP
+      changeZoom(newScale)
+    }
+  }
+
+  const zoomOut = () => {
+    const curr = scale.get()
+
+    if (curr > 0.5) {
+      const newScale = curr - ZOOM_STEP
+      changeZoom(newScale)
+    }
+  }
+
+  const resetCanvas = async () => await controls.start(defaultState)
+
+  return (
+    <div className="h-[200px] w-full rounded-docs_DEFAULT">
+      <div
+        ref={dragConstraints}
+        className="relative size-full rounded-docs_DEFAULT"
+      >
+        <div className="relative size-full overflow-hidden object-contain rounded-docs_DEFAULT shadow-elevation-card-rest">
+          <div>
+            <motion.div
+              onMouseDown={() => setIsDragging(true)}
+              onMouseUp={() => setIsDragging(false)}
+              drag
+              dragConstraints={dragConstraints}
+              dragElastic={0}
+              dragMomentum={false}
+              dragControls={dragControls}
+              initial={false}
+              animate={controls}
+              transition={{ duration: 0.25 }}
+              style={{
+                x,
+                y,
+                scale,
+              }}
+              className={clsx(
+                "bg-medusa-bg-subtle relative size-[500rem] origin-top-left items-start justify-start overflow-hidden",
+                "bg-[radial-gradient(var(--docs-border-base)_1.5px,transparent_0)] bg-[length:20px_20px] bg-repeat",
+                !isDragging && "cursor-grab",
+                isDragging && "cursor-grabbing"
+              )}
+            >
+              <main className="size-full">
+                <div className="absolute left-[1100px] top-[1100px] flex select-none items-start">
+                  {Object.entries(clusters).map(([depth, cluster]) => {
+                    const next = getNextCluster(clusters, Number(depth))
+
+                    return (
+                      <WorkflowDiagramDepth
+                        cluster={cluster}
+                        next={next}
+                        key={depth}
+                      />
+                    )
+                  })}
+                </div>
+              </main>
+            </motion.div>
+          </div>
+        </div>
+        <div className="bg-medusa-bg-base shadow-borders-base text-medusa-fg-subtle absolute bottom-docs_1 left-docs_1.5 flex h-[28px] items-center overflow-hidden rounded-docs_sm">
+          <div className="flex items-center">
+            <button
+              onClick={zoomIn}
+              type="button"
+              disabled={!canZoomIn}
+              aria-label="Zoom in"
+              className="disabled:text-medusa-fg-disabled transition-fg hover:bg-medusa-bg-base-hover active:bg-medusa-bg-base-pressed focus-visible:bg-medusa-bg-base-pressed border-r p-docs_0.25 outline-none"
+            >
+              <PlusMini />
+            </button>
+            <div>
+              <DropdownMenu>
+                <DropdownMenu.Trigger className="disabled:text-medusa-fg-disabled transition-fg hover:bg-medusa-bg-base-hover active:bg-medusa-bg-base-pressed focus-visible:bg-medusa-bg-base-pressed flex w-[50px] items-center justify-center border-r p-docs_0.25 outline-none">
+                  <Text
+                    as="span"
+                    size="xsmall"
+                    leading="compact"
+                    className="select-none tabular-nums"
+                  >
+                    {Math.round(zoom * 100)}%
+                  </Text>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content className="bg-medusa-bg-base">
+                  {[50, 75, 100, 125, 150].map((value) => (
+                    <DropdownMenu.Item
+                      key={value}
+                      onClick={() => changeZoom(value / 100)}
+                      className="px-docs_0.5 py-[6px]"
+                    >
+                      {value}%
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu>
+            </div>
+            <button
+              onClick={zoomOut}
+              type="button"
+              disabled={!canZoomOut}
+              aria-label="Zoom out"
+              className="disabled:text-medusa-fg-disabled transition-fg hover:bg-medusa-bg-base-hover active:bg-medusa-bg-base-pressed focus-visible:bg-medusa-bg-base-pressed border-r p-docs_0.25 outline-none"
+            >
+              <MinusMini />
+            </button>
+          </div>
+          <button
+            onClick={resetCanvas}
+            type="button"
+            aria-label="Reset canvas"
+            className="disabled:text-medusa-fg-disabled transition-fg hover:bg-medusa-bg-base-hover active:bg-medusa-bg-base-pressed focus-visible:bg-medusa-bg-base-pressed p-docs_0.25 outline-none"
+          >
+            <ArrowPathMini />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const WorkflowDiagram = (props: WorkflowDiagramProps) => {
+  return (
+    <Suspense fallback={<Loading />}>
+      <WorkflowDiagramContent {...props} />
+    </Suspense>
+  )
+}