From 4bd0917aed428ddc1b2c7b64a0fed8c10dd088f6 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Thu, 15 Aug 2024 16:47:27 +0300 Subject: [PATCH] docs: change workflow diagram to list (#8602) --- .../WorkflowDiagram/Canvas/Depth/index.tsx | 27 +++ .../WorkflowDiagram/Canvas/index.tsx | 206 +++++++++++++++++ .../{ => Common}/Arrow/End/index.tsx | 0 .../{ => Common}/Arrow/Horizontal/index.tsx | 0 .../{ => Common}/Arrow/Middle/index.tsx | 0 .../{ => Common}/Arrow/index.tsx | 0 .../{ => Common}/Depth/index.tsx | 4 +- .../{ => Common}/Line/index.tsx | 0 .../{ => Common}/Node/index.tsx | 2 +- .../WorkflowDiagram/List/Depth/index.tsx | 26 +++ .../components/WorkflowDiagram/List/index.tsx | 24 ++ .../src/components/WorkflowDiagram/index.tsx | 215 ++---------------- .../src/resources/helpers/workflow-diagram.ts | 2 +- 13 files changed, 300 insertions(+), 206 deletions(-) create mode 100644 www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/Depth/index.tsx create mode 100644 www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/index.tsx rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Arrow/End/index.tsx (100%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Arrow/Horizontal/index.tsx (100%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Arrow/Middle/index.tsx (100%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Arrow/index.tsx (100%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Depth/index.tsx (83%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Line/index.tsx (100%) rename www/packages/docs-ui/src/components/WorkflowDiagram/{ => Common}/Node/index.tsx (96%) create mode 100644 www/packages/docs-ui/src/components/WorkflowDiagram/List/Depth/index.tsx create mode 100644 www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/Depth/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/Depth/index.tsx new file mode 100644 index 0000000000..af293ccaf7 --- /dev/null +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/Depth/index.tsx @@ -0,0 +1,27 @@ +"use client" + +import React from "react" +import { WorkflowStepUi } from "types" +import { WorkflowDiagramStepNode } from "../../Common/Node" +import { WorkflowDiagramLine } from "../../Common/Line" + +export type WorkflowDiagramCanvasDepthProps = { + cluster: WorkflowStepUi[] + next: WorkflowStepUi[] +} + +export const WorkflowDiagramCanvasDepth = ({ + cluster, + next, +}: WorkflowDiagramCanvasDepthProps) => { + return ( +
+
+ {cluster.map((step) => ( + + ))} +
+ +
+ ) +} diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/index.tsx new file mode 100644 index 0000000000..fe4118dc50 --- /dev/null +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Canvas/index.tsx @@ -0,0 +1,206 @@ +"use client" + +import clsx from "clsx" +import { + useAnimationControls, + useDragControls, + useMotionValue, + motion, +} from "framer-motion" +import React, { useEffect, useRef, useState } from "react" +import { ArrowPathMini, MinusMini, PlusMini } from "@medusajs/icons" +import { DropdownMenu, Text } from "@medusajs/ui" +import { createNodeClusters, getNextCluster } from "../../../utils" +import { WorkflowDiagramCanvasDepth } from "./Depth" +import { WorkflowDiagramCommonProps } from "../../.." + +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 + +export const WorkflowDiagramCanvas = ({ + workflow, +}: WorkflowDiagramCommonProps) => { + const [zoom, setZoom] = useState(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(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]) + + 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 ( +
+
+
+
+ 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" + )} + > +
+
+ {Object.entries(clusters).map(([depth, cluster]) => { + const next = getNextCluster(clusters, Number(depth)) + + return ( + + ) + })} +
+
+ +
+
+
+
+ +
+ + + + {Math.round(zoom * 100)}% + + + + {[50, 75, 100, 125, 150].map((value) => ( + changeZoom(value / 100)} + className="px-docs_0.5 py-[6px]" + > + {value}% + + ))} + + +
+ +
+ +
+
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/End/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/End/index.tsx similarity index 100% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/End/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/End/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/Horizontal/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/Horizontal/index.tsx similarity index 100% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/Horizontal/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/Horizontal/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/Middle/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/Middle/index.tsx similarity index 100% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/Middle/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/Middle/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/index.tsx similarity index 100% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Arrow/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Arrow/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Depth/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Depth/index.tsx similarity index 83% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Depth/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Depth/index.tsx index b38bb15749..b0839afacf 100644 --- a/www/packages/docs-ui/src/components/WorkflowDiagram/Depth/index.tsx +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Depth/index.tsx @@ -2,8 +2,8 @@ import React from "react" import { WorkflowStepUi } from "types" -import { WorkflowDiagramStepNode } from "../Node" -import { WorkflowDiagramLine } from "../Line" +import { WorkflowDiagramStepNode } from "../../Common/Node" +import { WorkflowDiagramLine } from "../../Common/Line" export type WorkflowDiagramDepthProps = { cluster: WorkflowStepUi[] diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Line/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Line/index.tsx similarity index 100% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Line/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Line/index.tsx diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Node/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx similarity index 96% rename from www/packages/docs-ui/src/components/WorkflowDiagram/Node/index.tsx rename to www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx index adb04d83ab..28405cc458 100644 --- a/www/packages/docs-ui/src/components/WorkflowDiagram/Node/index.tsx +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx @@ -45,7 +45,7 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => { >
{ + return ( +
+ +
+ {cluster.map((step) => ( + + ))} +
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx new file mode 100644 index 0000000000..b2fc736552 --- /dev/null +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx @@ -0,0 +1,24 @@ +"use client" + +import React from "react" +import { createNodeClusters, getNextCluster } from "../../../utils" +import { WorkflowDiagramCommonProps } from "../../.." +import { WorkflowDiagramListDepth } from "./Depth" + +export const WorkflowDiagramList = ({ + workflow, +}: WorkflowDiagramCommonProps) => { + const clusters = createNodeClusters(workflow.steps) + + return ( +
+ {Object.entries(clusters).map(([depth, cluster]) => { + const next = getNextCluster(clusters, Number(depth)) + + return ( + + ) + })} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/index.tsx index c78932a244..a7948b4b97 100644 --- a/www/packages/docs-ui/src/components/WorkflowDiagram/index.tsx +++ b/www/packages/docs-ui/src/components/WorkflowDiagram/index.tsx @@ -1,218 +1,29 @@ "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 React, { Suspense } from "react" import { Workflow } from "types" -import { WorkflowDiagramDepth } from "./Depth" import { Loading } from "../.." +import { WorkflowDiagramCanvas } from "./Canvas" +import { WorkflowDiagramList } from "./List" -export type WorkflowDiagramProps = { +export type WorkflowDiagramCommonProps = { workflow: Workflow } -type ZoomScale = 0.5 | 0.75 | 1 +export type WorkflowDiagramType = "canvas" | "list" -const defaultState = { - x: -1000, - y: -1020, - scale: 1, +export type WorkflowDiagramProps = WorkflowDiagramCommonProps & { + type?: WorkflowDiagramType } -const MAX_ZOOM = 1.5 -const MIN_ZOOM = 0.5 -const ZOOM_STEP = 0.25 - -const WorkflowDiagramContent = ({ workflow }: WorkflowDiagramProps) => { - const [zoom, setZoom] = useState(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(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 ( -
-
-
-
- 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" - )} - > -
-
- {Object.entries(clusters).map(([depth, cluster]) => { - const next = getNextCluster(clusters, Number(depth)) - - return ( - - ) - })} -
-
- -
-
-
-
- -
- - - - {Math.round(zoom * 100)}% - - - - {[50, 75, 100, 125, 150].map((value) => ( - changeZoom(value / 100)} - className="px-docs_0.5 py-[6px]" - > - {value}% - - ))} - - -
- -
- -
-
-
- ) -} - -export const WorkflowDiagram = (props: WorkflowDiagramProps) => { +export const WorkflowDiagram = ({ + type = "list", + ...props +}: WorkflowDiagramProps) => { return ( }> - + {type === "canvas" && } + {type === "list" && } ) } diff --git a/www/utils/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/workflow-diagram.ts b/www/utils/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/workflow-diagram.ts index e38808e16e..946a2445e2 100644 --- a/www/utils/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/workflow-diagram.ts +++ b/www/utils/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/workflow-diagram.ts @@ -52,7 +52,7 @@ export default function (theme: MarkdownTheme) { }) return ( - `${Handlebars.helpers.titleLevel()} Diagram\n\n` + + `${Handlebars.helpers.titleLevel()} Steps\n\n` + formatWorkflowDiagramComponent({ component: workflowDiagramComponent, componentItem: {