docs: support since, deprecated, and feature flag tags in dml reference (#13741)

www/packages/docs-ui/src/components/Notices/DeprecatedNotice/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Badge, Tooltip } from "@/components"
+
+export type DeprecatedNoticeProps = {
+  description?: string
+  tooltipTextClassName?: string
+  badgeClassName?: string
+  badgeContent?: React.ReactNode
+}
+
+export const DeprecatedNotice = ({
+  description,
+  tooltipTextClassName,
+  badgeClassName,
+  badgeContent = `Deprecated`,
+}: DeprecatedNoticeProps) => {
+  return (
+    <Tooltip
+      tooltipChildren={
+        <span className={tooltipTextClassName}>
+          {description ||
+            "This feature is deprecated and may be removed in future releases."}
+        </span>
+      }
+      clickable
+    >
+      <Badge variant="neutral" className={badgeClassName}>
+        {badgeContent}
+      </Badge>
+    </Tooltip>
+  )
+}

www/packages/docs-ui/src/components/Notices/VersionNotice/index.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Badge, Tooltip } from "@/components"
+
+export type VersionNoticeProps = {
+  version: string
+  tooltipTextClassName?: string
+  badgeClassName?: string
+  badgeContent?: React.ReactNode
+}
+
+export const VersionNotice = ({
+  version,
+  tooltipTextClassName,
+  badgeClassName,
+  badgeContent = `v${version}`,
+}: VersionNoticeProps) => {
+  return (
+    <Tooltip
+      tooltipChildren={
+        <span className={tooltipTextClassName}>
+          This is available starting from
+          <br />
+          <a
+            href={`https://github.com/medusajs/medusa/releases/tag/${version}`}
+          >
+            Medusa v{version}
+          </a>
+        </span>
+      }
+      clickable
+    >
+      <Badge variant="blue" className={badgeClassName}>
+        {badgeContent}
+      </Badge>
+    </Tooltip>
+  )
+}

www/packages/docs-ui/src/components/TypeList/Items/index.tsx

@@ -22,6 +22,8 @@ import {
 import { decodeStr, isInView } from "@/utils"
 import { usePathname } from "next/navigation"
 import { useIsBrowser, useSiteConfig } from "../../.."
+import { VersionNotice } from "../../Notices/VersionNotice"
+import { DeprecatedNotice } from "../../Notices/DeprecatedNotice"
 
 type CommonProps = ParentCommonProps & {
   level?: number
@@ -236,6 +238,15 @@ const TypeListItem = ({
                 badgeContent={<ArrowsPointingOutMini />}
               />
             )}
+            {item.since && (
+              <VersionNotice
+                version={item.since}
+                badgeClassName="!p-0 leading-none"
+              />
+            )}
+            {item.deprecated?.is_deprecated && (
+              <DeprecatedNotice description={item.deprecated?.description} />
+            )}
           </div>
         </div>
       </DetailsSummary>

www/packages/docs-ui/src/components/TypeList/index.tsx

@@ -17,6 +17,11 @@ export type Type = {
   featureFlag?: string
   expandable: boolean
   children?: Type[]
+  deprecated?: {
+    is_deprecated: boolean
+    description?: string
+  }
+  since?: string
 }
 
 type ParameterTypesType = {

www/packages/docs-ui/src/components/index.ts

@@ -22,8 +22,10 @@ export * from "./Details/Summary"
 export * from "./DetailsList"
 export * from "./DottedSeparator"
 export * from "./EditButton"
-export * from "./ExpandableNotice"
-export * from "./FeatureFlagNotice"
+export * from "./Notices/ExpandableNotice"
+export * from "./Notices/FeatureFlagNotice"
+export * from "./Notices/DeprecatedNotice"
+export * from "./Notices/VersionNotice"
 export * from "./Feedback"
 export * from "./Feedback/Solutions"
 export * from "./Footer"