diff --git a/www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx b/www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx index 37ca9dc6bf..ea14fee313 100644 --- a/www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx +++ b/www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx @@ -1,17 +1,13 @@ +import { BetaBadge } from "docs-ui" + export const metadata = { title: `${pageNumber} Manage Relationships`, } -# {metadata.title} +# {metadata.title} In this chapter, you'll learn how to manage relationships between data models when creating, updating, or retrieving records using the module's main service. - - -Data model relationships are in active development and may change. - - - ## Manage One-to-One and One-to-Many Relationship When you create a record of a data model that belongs to another, pass the ID of the other data model's record in the `{relation_name}_id` property. diff --git a/www/apps/book/app/page.mdx b/www/apps/book/app/page.mdx index 0ccf17eb7b..3f087a0b05 100644 --- a/www/apps/book/app/page.mdx +++ b/www/apps/book/app/page.mdx @@ -1,5 +1,6 @@ import { CheckCircleSolid, BuildingStorefront, BuildingsSolid, ComputerDesktop, FlyingBox } from "@medusajs/icons" import { config } from "@/config" +import { Prerequisites } from "docs-ui" export const metadata = { title: `${pageNumber} Introduction - ${config.titleSuffix}`, @@ -20,14 +21,20 @@ With these tools, you save time you would spend with other platforms on maintain ## Get started - - - -- [Node.js v20+](https://nodejs.org/en/download) -- [Git CLI tool](https://git-scm.com/downloads) -- [PostgreSQL](https://www.postgresql.org/download/) - - + Create your first Medusa store by running the following command: diff --git a/www/packages/docs-ui/src/components/BetaBadge/index.tsx b/www/packages/docs-ui/src/components/BetaBadge/index.tsx new file mode 100644 index 0000000000..cb0356a656 --- /dev/null +++ b/www/packages/docs-ui/src/components/BetaBadge/index.tsx @@ -0,0 +1,23 @@ +import React from "react" +import { Badge, Tooltip } from "../.." + +type BetaBadgeProps = { + text?: string + tooltipText?: string +} + +export const BetaBadge = ({ + text = "Coming soon", + tooltipText = "Coming soon", +}: BetaBadgeProps) => { + return ( + + + {text} + + + ) +} diff --git a/www/packages/docs-ui/src/components/Icons/ShadedBg/index.tsx b/www/packages/docs-ui/src/components/Icons/ShadedBg/index.tsx index e73f4407d0..f6acb55c3b 100644 --- a/www/packages/docs-ui/src/components/Icons/ShadedBg/index.tsx +++ b/www/packages/docs-ui/src/components/Icons/ShadedBg/index.tsx @@ -32,214 +32,301 @@ export const ShadedBgIcon = ({ return ( - + + + + + + + + + + + + - + diff --git a/www/packages/docs-ui/src/components/Note/Layout/index.tsx b/www/packages/docs-ui/src/components/Note/Layout/index.tsx index 588bf237f2..ffb2b6a112 100644 --- a/www/packages/docs-ui/src/components/Note/Layout/index.tsx +++ b/www/packages/docs-ui/src/components/Note/Layout/index.tsx @@ -1,60 +1,111 @@ -import React from "react" +import React, { useMemo } from "react" import { NoteProps } from ".." import clsx from "clsx" +import { MarkdownContent } from "../../.." -type NoteLayoutProps = NoteProps & { - icon: React.ReactNode +type StringInfo = { + allStringChildren: boolean + stringChildren: string[] } -export const NoteLayout = ({ - type, - title, - children, - icon, -}: NoteLayoutProps) => { - const isDefaultStyle = - type === "default" || - type === "success" || - type === "error" || - type === "check" - const isWarningStyle = type === "warning" - const isSoonStyle = type === "soon" +type NoteLayoutProps = NoteProps + +export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { + const getStringInfoFromChildren = (nodes: React.ReactNode): StringInfo => { + let allStringChildren = true + const stringChildren: string[] = [] + + React.Children.forEach(nodes, (child) => { + if (!allStringChildren) { + return + } else if (["string", "number"].includes(typeof child)) { + stringChildren.push(`${child}`) + } else if (Array.isArray(child)) { + const childInfo = getStringInfoFromChildren(child) + allStringChildren = childInfo.allStringChildren + stringChildren.push(...childInfo.stringChildren) + } else if ( + React.isValidElement(child) && + typeof child.props === "object" && + child.props && + "children" in child.props && + child.props.children + ) { + const typeStr = child.type.toString() + if (typeStr.includes(`"li"`)) { + allStringChildren = false + return + } else if ( + "href" in child.props && + typeof child.props.children === "string" + ) { + stringChildren.push(`[${child.props.children}](${child.props.href})`) + return + } else if ( + typeStr.includes("InlineCode") && + typeof child.props.children === "string" + ) { + stringChildren.push(`\`${child.props.children}\``) + return + } + + const childInfo = getStringInfoFromChildren( + child.props.children as React.ReactNode + ) + allStringChildren = childInfo.allStringChildren + stringChildren.push(...childInfo.stringChildren) + } + }) + + return { + allStringChildren, + stringChildren, + } + } + const { allStringChildren, stringChildren } = useMemo(() => { + const { allStringChildren, stringChildren } = + getStringInfoFromChildren(children) + + return { + allStringChildren, + stringChildren: stringChildren.join(" "), + } + }, [children]) return (
-
- {icon} -
*:last-child]:mb-0", - "[&>p>code]:px-docs_0.5 [&>p>code]:text-code-label" - )} - > - {title && ( - +
+
+ + {title}:  + + {allStringChildren && ( + - {title} - + {stringChildren} + )} - {children} + {!allStringChildren && children}
diff --git a/www/packages/docs-ui/src/components/Note/Types/checks.tsx b/www/packages/docs-ui/src/components/Note/Types/checks.tsx index 3b815c50c3..684159aa2a 100644 --- a/www/packages/docs-ui/src/components/Note/Types/checks.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/checks.tsx @@ -1,27 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { CheckCircleSolid } from "@medusajs/icons" -import clsx from "clsx" -export const CheckNote = ({ - title = "Prerequisites", - icon, - ...props -}: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const CheckNote = ({ title = "Prerequisites", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/Types/default.tsx b/www/packages/docs-ui/src/components/Note/Types/default.tsx index b6d7adb5cf..0d7d7d68b9 100644 --- a/www/packages/docs-ui/src/components/Note/Types/default.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/default.tsx @@ -1,23 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { InformationCircleSolid } from "@medusajs/icons" -import clsx from "clsx" -export const DefaultNote = ({ title = "Note", icon, ...props }: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const DefaultNote = ({ title = "Note", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/Types/error.tsx b/www/packages/docs-ui/src/components/Note/Types/error.tsx index 707aaf730f..575e225b80 100644 --- a/www/packages/docs-ui/src/components/Note/Types/error.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/error.tsx @@ -1,23 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { XMark } from "@medusajs/icons" -import clsx from "clsx" -export const ErrorNote = ({ title = "Error", icon, ...props }: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const ErrorNote = ({ title = "Error", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/Types/soon.tsx b/www/packages/docs-ui/src/components/Note/Types/soon.tsx index de34cfd014..bcfd122db1 100644 --- a/www/packages/docs-ui/src/components/Note/Types/soon.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/soon.tsx @@ -1,27 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { LightBulb } from "@medusajs/icons" -import clsx from "clsx" -export const SoonNote = ({ - title = "Coming soon", - icon, - ...props -}: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const SoonNote = ({ title = "Coming soon", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/Types/sucess.tsx b/www/packages/docs-ui/src/components/Note/Types/sucess.tsx index 07a21e7f1c..a18ccc230b 100644 --- a/www/packages/docs-ui/src/components/Note/Types/sucess.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/sucess.tsx @@ -1,27 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { Check } from "@medusajs/icons" -import clsx from "clsx" -export const SuccessNote = ({ - title = "Sucess", - icon, - ...props -}: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const SuccessNote = ({ title = "Sucess", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/Types/warning.tsx b/www/packages/docs-ui/src/components/Note/Types/warning.tsx index 883f9448ae..c781f3ff78 100644 --- a/www/packages/docs-ui/src/components/Note/Types/warning.tsx +++ b/www/packages/docs-ui/src/components/Note/Types/warning.tsx @@ -1,27 +1,7 @@ import React from "react" import { NoteProps } from ".." import { NoteLayout } from "../Layout" -import { ExclamationCircleSolid } from "@medusajs/icons" -import clsx from "clsx" -export const WarningNote = ({ - title = "Warning", - icon, - ...props -}: NoteProps) => { - return ( - - ) - } - {...props} - /> - ) +export const WarningNote = ({ title = "Warning", ...props }: NoteProps) => { + return } diff --git a/www/packages/docs-ui/src/components/Note/index.tsx b/www/packages/docs-ui/src/components/Note/index.tsx index 9e2c090ed2..af481d4aec 100644 --- a/www/packages/docs-ui/src/components/Note/index.tsx +++ b/www/packages/docs-ui/src/components/Note/index.tsx @@ -10,7 +10,6 @@ export type NoteProps = { type?: "default" | "warning" | "success" | "error" | "check" | "soon" title?: string children?: React.ReactNode - icon?: React.ReactNode } export const Note = ({ type = "default", ...props }: NoteProps) => { @@ -21,6 +20,7 @@ export const Note = ({ type = "default", ...props }: NoteProps) => { return case "error": return + // TODO remove both once we've removed all notes using them case "check": return case "soon": diff --git a/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx b/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx new file mode 100644 index 0000000000..4b04eba612 --- /dev/null +++ b/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx @@ -0,0 +1,40 @@ +import clsx from "clsx" +import Link from "next/link" +import React from "react" + +export type PrerequisiteItemPosition = "top" | "middle" | "bottom" | "alone" + +export type PrerequisiteItemType = { + text: string + link?: string + position?: PrerequisiteItemPosition +} + +type PrerequisiteItemProps = { + item: PrerequisiteItemType +} + +export const PrerequisiteItem = ({ + item: { text, link, position = "alone" }, +}: PrerequisiteItemProps) => { + return ( + + {text}↗ + + ) +} diff --git a/www/packages/docs-ui/src/components/Prerequisites/index.tsx b/www/packages/docs-ui/src/components/Prerequisites/index.tsx new file mode 100644 index 0000000000..2275b63b60 --- /dev/null +++ b/www/packages/docs-ui/src/components/Prerequisites/index.tsx @@ -0,0 +1,88 @@ +"use client" + +import React from "react" +import { Button, useCollapsible } from "../.." +import clsx from "clsx" +import { TriangleRightMini } from "@medusajs/icons" +import { + PrerequisiteItem, + PrerequisiteItemPosition, + PrerequisiteItemType, +} from "./Item" + +type PrerequisitesProps = { + items: PrerequisiteItemType[] +} + +export const Prerequisites = ({ items }: PrerequisitesProps) => { + const { collapsed, getCollapsibleElms, setCollapsed } = useCollapsible({ + initialValue: false, + translateEnabled: false, + }) + + const getPosition = (index: number): PrerequisiteItemPosition => { + if (items.length === 1) { + return "alone" + } + + if (index === items.length - 1) { + return "bottom" + } + + return index === 0 ? "top" : "middle" + } + + return ( +
{ + event.preventDefault() + }} + onToggle={(event) => { + // this is to avoid event propagation + // when details are nested, which is a bug + // in react. Learn more here: + // https://github.com/facebook/react/issues/22718 + event.stopPropagation() + }} + className="my-docs_1" + > + setCollapsed((prev) => !prev)} + > + + + {getCollapsibleElms( +
+ {items.map((item, index) => ( + + ))} +
+ )} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts index f117d941da..06f5c1cdef 100644 --- a/www/packages/docs-ui/src/components/index.ts +++ b/www/packages/docs-ui/src/components/index.ts @@ -2,6 +2,7 @@ export * from "./AiAssistant" export * from "./ApiRunner" export * from "./Badge" export * from "./Bannerv2" +export * from "./BetaBadge" export * from "./Bordered" export * from "./BorderedIcon" export * from "./Breadcrumbs" @@ -48,6 +49,7 @@ export * from "./Notification" export * from "./Notification/Item" export * from "./Notification/Item/Layout/Default" export * from "./Pagination" +export * from "./Prerequisites" export * from "./Rating" export * from "./Search" export * from "./Search/EmptyQueryBoundary" diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js index 847ece038e..b96335d147 100644 --- a/www/packages/tailwind/base.tailwind.config.js +++ b/www/packages/tailwind/base.tailwind.config.js @@ -441,6 +441,20 @@ module.exports = { fontWeight: "400", }, ], + small: [ + "13px", + { + lineHeight: "150%", + fontWeight: "400", + }, + ], + "small-plus": [ + "13px", + { + lineHeight: "150%", + fontWeight: "500", + }, + ], "code-label": [ "12px", {