From d2ddabffec415d44d27d86d3c5c02b47347c080b Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 19 Aug 2024 16:59:04 +0300 Subject: [PATCH 1/5] docs: redesign notes --- .../data-models/manage-relationships/page.mdx | 10 +- www/apps/book/app/page.mdx | 23 +- .../src/components/BetaBadge/index.tsx | 23 ++ .../src/components/Icons/ShadedBg/index.tsx | 343 +++++++++++------- .../src/components/Note/Layout/index.tsx | 123 ++++--- .../src/components/Note/Types/checks.tsx | 24 +- .../src/components/Note/Types/default.tsx | 20 +- .../src/components/Note/Types/error.tsx | 20 +- .../src/components/Note/Types/soon.tsx | 24 +- .../src/components/Note/Types/sucess.tsx | 24 +- .../src/components/Note/Types/warning.tsx | 24 +- .../docs-ui/src/components/Note/index.tsx | 2 +- .../components/Prerequisites/Item/index.tsx | 39 ++ .../src/components/Prerequisites/index.tsx | 88 +++++ www/packages/docs-ui/src/components/index.ts | 2 + www/packages/tailwind/base.tailwind.config.js | 14 + 16 files changed, 489 insertions(+), 314 deletions(-) create mode 100644 www/packages/docs-ui/src/components/BetaBadge/index.tsx create mode 100644 www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx create mode 100644 www/packages/docs-ui/src/components/Prerequisites/index.tsx 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 37ca9dc6bf391..ea14fee313af4 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 0ccf17eb7b864..3f087a0b05ab2 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 0000000000000..cb0356a6564b8 --- /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 e73f4407d0234..f6acb55c3b4f4 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 588bf237f2402..e606e2f5cef3e 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,91 @@ -import React from "react" +import React, { useMemo } from "react" import { NoteProps } from ".." import clsx from "clsx" -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 + ) { + if (child.type.toString().includes(`"li"`)) { + allStringChildren = false + 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} - - )} - {children} + +
+
+ + {title}:  + + {allStringChildren && stringChildren} + {!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 3b815c50c34b6..684159aa2a25d 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 b6d7adb5cf3fa..0d7d7d68b9a73 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 707aaf730fc10..575e225b80bd2 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 de34cfd014b1c..bcfd122db1038 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 07a21e7f1c90f..a18ccc230bb37 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 883f9448ae691..c781f3ff78e4f 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 9e2c090ed29de..af481d4aece59 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 0000000000000..8c18884692d89 --- /dev/null +++ b/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx @@ -0,0 +1,39 @@ +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 0000000000000..2275b63b6054c --- /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 f117d941da3f1..06f5c1cdef58c 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 ec37502293af3..b62ca76a0df06 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", { From f5729ee365222acf47ac33c9585f2c169d2ef9ee Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 19 Aug 2024 16:59:53 +0300 Subject: [PATCH 2/5] fix color for warning notes --- www/packages/docs-ui/src/components/Note/Layout/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 e606e2f5cef3e..409d2cd93b96a 100644 --- a/www/packages/docs-ui/src/components/Note/Layout/index.tsx +++ b/www/packages/docs-ui/src/components/Note/Layout/index.tsx @@ -72,8 +72,7 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { // TODO remove once we use the new prerequisites component across docs (type === "default" || type === "check") && "bg-medusa-tag-neutral-icon", - type === "warning" && "bg-medusa-tag-orange-icon", - type === "error" && "bg-medusa-tag-red-icon", + (type === "error" || type === "warning") && "bg-medusa-tag-red-icon", type === "success" && "bg-medusa-tag-green-icon", // TODO remove once all soon components are removed type === "soon" && "bg-medusa-tag-blue-icon" From 4998e3f165cd804037dfe9c9dcd89d9aad87c8f8 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 19 Aug 2024 17:04:39 +0300 Subject: [PATCH 3/5] allow optional links --- .../docs-ui/src/components/Prerequisites/Item/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx b/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx index 8c18884692d89..4b04eba612d92 100644 --- a/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx +++ b/www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx @@ -6,7 +6,7 @@ export type PrerequisiteItemPosition = "top" | "middle" | "bottom" | "alone" export type PrerequisiteItemType = { text: string - link: string + link?: string position?: PrerequisiteItemPosition } @@ -19,7 +19,7 @@ export const PrerequisiteItem = ({ }: PrerequisiteItemProps) => { return ( {text}↗ From bb5009b7ae06d743b697573a3f59f9ca54577064 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 19 Aug 2024 17:21:51 +0300 Subject: [PATCH 4/5] show links in a note --- .../docs-ui/src/components/Note/Layout/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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 409d2cd93b96a..9f67f2781157a 100644 --- a/www/packages/docs-ui/src/components/Note/Layout/index.tsx +++ b/www/packages/docs-ui/src/components/Note/Layout/index.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from "react" import { NoteProps } from ".." import clsx from "clsx" +import { MarkdownContent } from "../../.." type StringInfo = { allStringChildren: boolean @@ -33,6 +34,12 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { if (child.type.toString().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 } const childInfo = getStringInfoFromChildren( @@ -83,7 +90,11 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { {title}:  - {allStringChildren && stringChildren} + {allStringChildren && ( + + {stringChildren} + + )} {!allStringChildren && children}
From 1dd2f439b87cd93e6875c118f0eab7a420e6483b Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 19 Aug 2024 17:30:04 +0300 Subject: [PATCH 5/5] allow line code in notes --- .../docs-ui/src/components/Note/Layout/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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 9f67f2781157a..ffb2b6a1121b7 100644 --- a/www/packages/docs-ui/src/components/Note/Layout/index.tsx +++ b/www/packages/docs-ui/src/components/Note/Layout/index.tsx @@ -31,7 +31,8 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { "children" in child.props && child.props.children ) { - if (child.type.toString().includes(`"li"`)) { + const typeStr = child.type.toString() + if (typeStr.includes(`"li"`)) { allStringChildren = false return } else if ( @@ -40,6 +41,12 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { ) { 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( @@ -91,7 +98,10 @@ export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => { {title}:  {allStringChildren && ( - + {stringChildren} )}