From ddc0c9dfff86a87a8e3eaf0babd3f221a7b5f396 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Wed, 24 Jan 2024 10:42:55 +0200 Subject: [PATCH] docs: add anchor link to reference parameters (#6194) - Added anchor links to items in parameter components - Added sectionTitle prop in markdown theme Note: Due to the second point, the change requires generating references to see the anchor links, which would result in a big diff in this PR. Instead, next time the references are generated for a release, this feature will available for use. --- .../resources/helpers/parameter-component.ts | 6 +- .../src/resources/helpers/parameter.ts | 4 +- .../helpers/react-query-hook-params.ts | 6 +- .../helpers/react-query-mutation-params.ts | 1 + .../helpers/react-query-mutation-return.ts | 1 + .../helpers/react-query-query-return.ts | 1 + .../src/resources/helpers/returns.ts | 10 +- .../helpers/type-declaration-members.ts | 13 +- .../helpers/type-parameter-component.ts | 10 +- .../src/resources/helpers/type-parameter.ts | 7 +- .../resources/partials/member.declaration.hbs | 6 +- .../partials/member.react-query.signature.hbs | 2 +- .../resources/partials/member.signature.hbs | 6 +- .../src/resources/partials/members.group.hbs | 4 +- .../src/resources/templates/reflection.hbs | 2 +- .../src/utils/format-parameter-component.ts | 4 +- .../components/ParameterTypes/Items/index.tsx | 170 +++++++++++++----- .../src/components/ParameterTypes/index.tsx | 2 + www/apps/docs/src/utils/is-in-view.ts | 10 ++ .../src/components/CopyButton/index.tsx | 9 +- .../src/components/Details/Summary/index.tsx | 3 + www/packages/tailwind/base.tailwind.config.js | 15 ++ 22 files changed, 229 insertions(+), 63 deletions(-) create mode 100644 www/apps/docs/src/utils/is-in-view.ts diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter-component.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter-component.ts index c9d64aef3e..95a3927036 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter-component.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter-component.ts @@ -8,7 +8,10 @@ import { formatParameterComponent } from "../../utils/format-parameter-component export default function (theme: MarkdownTheme) { Handlebars.registerHelper( "parameterComponent", - function (this: ReflectionParameterType[]) { + function ( + this: ReflectionParameterType[], + options: Handlebars.HelperOptions + ) { const { parameterComponent, maxLevel, parameterComponentExtraProps } = theme.getFormattingOptionsForLocation() const parameters = this.reduce( @@ -26,6 +29,7 @@ export default function (theme: MarkdownTheme) { parameterComponent, componentItems: parameters, extraProps: parameterComponentExtraProps, + sectionTitle: options.hash.sectionTitle, }) } ) diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter.ts index 657be78252..f006788b57 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/parameter.ts @@ -5,13 +5,13 @@ import { ParameterReflection } from "typedoc" export default function (theme: MarkdownTheme) { Handlebars.registerHelper( "parameter", - function (this: ParameterReflection[]) { + function (this: ParameterReflection[], options: Handlebars.HelperOptions) { const { parameterStyle } = theme.getFormattingOptionsForLocation() if (parameterStyle === "list") { return Handlebars.helpers.parameterList.call(this) } else if (parameterStyle === "component") { - return Handlebars.helpers.parameterComponent.call(this) + return Handlebars.helpers.parameterComponent.call(this, options) } else { return Handlebars.helpers.parameterTable.call(this) } diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-hook-params.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-hook-params.ts index a189d6a4ff..7e228e0ffb 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-hook-params.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-hook-params.ts @@ -10,7 +10,11 @@ export default function () { const hookParameters = getHookParams(this) if (hookParameters?.length) { - parametersStr = Handlebars.helpers.parameter.call(hookParameters) + parametersStr = Handlebars.helpers.parameter.call(hookParameters, { + hash: { + sectionTitle: this.name, + }, + }) } return parametersStr diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-params.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-params.ts index f05180e21e..4a8548da01 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-params.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-params.ts @@ -31,6 +31,7 @@ export default function (theme: MarkdownTheme) { parameterComponent, componentItems: mutationParameters, extraProps: parameterComponentExtraProps, + sectionTitle: this.name, }) } ) diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-return.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-return.ts index d7bcac313d..795d1cf20d 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-return.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-mutation-return.ts @@ -31,6 +31,7 @@ export default function (theme: MarkdownTheme) { parameterComponent, componentItems: mutationParameters, extraProps: parameterComponentExtraProps, + sectionTitle: this.name, }) } ) diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-query-return.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-query-return.ts index 8c9b5e1f88..e4309541a3 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-query-return.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/react-query-query-return.ts @@ -31,6 +31,7 @@ export default function (theme: MarkdownTheme) { parameterComponent, componentItems: mutationParameters, extraProps: parameterComponentExtraProps, + sectionTitle: this.name, }) } ) diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/returns.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/returns.ts index 7811ab3278..993e0eaa82 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/returns.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/returns.ts @@ -13,7 +13,7 @@ export default function (theme: MarkdownTheme) { if (reflection.variant === "signature" && "type" in reflection) { return getReturnFromType(theme, reflection) } else if (reflection.comment) { - return getReturnFromComment(theme, reflection.comment) + return getReturnFromComment(theme, reflection.comment, reflection.name) } else { return "" } @@ -49,6 +49,7 @@ function getReturnFromType( parameterComponent, componentItems, extraProps: parameterComponentExtraProps, + sectionTitle: reflection.name, }) } else { return formatReturnAsList(componentItems) @@ -77,7 +78,11 @@ function formatReturnAsList(componentItems: Parameter[], level = 1): string { .join("\n") } -function getReturnFromComment(theme: MarkdownTheme, comment: Comment) { +function getReturnFromComment( + theme: MarkdownTheme, + comment: Comment, + reflectionName: string +) { const md: string[] = [] const { parameterStyle, @@ -113,6 +118,7 @@ function getReturnFromComment(theme: MarkdownTheme, comment: Comment) { ...parameterComponentExtraProps, title: commentPart.target.name, }, + sectionTitle: reflectionName, })}\n\n` : `\n\n
\n\n${ commentPart.target.name diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-declaration-members.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-declaration-members.ts index 9bdb3af7dd..3559d921df 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-declaration-members.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-declaration-members.ts @@ -10,7 +10,10 @@ import { formatParameterComponent } from "../../utils/format-parameter-component export default function (theme: MarkdownTheme) { Handlebars.registerHelper( "typeDeclarationMembers", - function (this: DeclarationReflection[]) { + function ( + this: DeclarationReflection[], + options: Handlebars.HelperOptions + ) { const { parameterComponent, maxLevel, parameterComponentExtraProps } = theme.getFormattingOptionsForLocation() const comments = this.map( @@ -24,6 +27,10 @@ export default function (theme: MarkdownTheme) { [] ) as DeclarationReflection[] + // if (typeof options.hash.sectionTitle !== "string") { + // console.log("here2") + // } + let result = "" switch (theme.objectLiteralTypeDeclarationStyle) { case "list": { @@ -36,6 +43,7 @@ export default function (theme: MarkdownTheme) { parameterComponent, maxLevel, parameterComponentExtraProps, + sectionTitle: options.hash.sectionTitle, }) break } @@ -65,11 +73,13 @@ function getComponentMarkdownContent({ parameterComponent, maxLevel, parameterComponentExtraProps, + sectionTitle, }: { properties: DeclarationReflection[] parameterComponent?: string maxLevel?: number | undefined parameterComponentExtraProps?: Record + sectionTitle: string }) { const parameters = properties.map((property) => reflectionFormatter({ @@ -84,6 +94,7 @@ function getComponentMarkdownContent({ parameterComponent, componentItems: parameters as Parameter[], extraProps: parameterComponentExtraProps, + sectionTitle, }) } diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter-component.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter-component.ts index c2b99279ef..2279586965 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter-component.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter-component.ts @@ -7,7 +7,10 @@ import { formatParameterComponent } from "../../utils/format-parameter-component export default function (theme: MarkdownTheme) { Handlebars.registerHelper( "typeParameterComponent", - function (this: TypeParameterReflection[]) { + function ( + this: TypeParameterReflection[], + options: Handlebars.HelperOptions + ) { const { parameterComponent, maxLevel, parameterComponentExtraProps } = theme.getFormattingOptionsForLocation() const parameters = this.map((parameter) => @@ -18,10 +21,15 @@ export default function (theme: MarkdownTheme) { }) ) + // if (typeof options.hash.sectionTitle !== "string") { + // console.log("here3") + // } + return formatParameterComponent({ parameterComponent, componentItems: parameters, extraProps: parameterComponentExtraProps, + sectionTitle: options.hash.sectionTitle, }) } ) diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter.ts index 7eeeff1497..fc3dfc4f93 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/helpers/type-parameter.ts @@ -5,13 +5,16 @@ import { TypeParameterReflection } from "typedoc" export default function (theme: MarkdownTheme) { Handlebars.registerHelper( "typeParameter", - function (this: TypeParameterReflection[]) { + function ( + this: TypeParameterReflection[], + options: Handlebars.HelperOptions + ) { const { parameterStyle } = theme.getFormattingOptionsForLocation() if (parameterStyle === "list") { return Handlebars.helpers.typeParameterList.call(this) } else if (parameterStyle === "component") { - return Handlebars.helpers.typeParameterComponent.call(this) + return Handlebars.helpers.typeParameterComponent.call(this, options) } else { return Handlebars.helpers.typeParameterTable.call(this) } diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.declaration.hbs b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.declaration.hbs index 75266568e9..9a853f8526 100755 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.declaration.hbs +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.declaration.hbs @@ -24,7 +24,7 @@ {{#with typeParameters}} -{{{typeParameter}}} +{{{typeParameter sectionTitle=../name}}} {{/with}} @@ -92,7 +92,7 @@ {{#with type.declaration.children}} -{{{typeDeclarationMembers}}} +{{{typeDeclarationMembers sectionTitle=../name}}} {{/with}} @@ -118,7 +118,7 @@ {{{titleLevel}}} Properties -{{{typeDeclarationMembers}}} +{{{typeDeclarationMembers sectionTitle=../name}}} {{/with}} diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.react-query.signature.hbs b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.react-query.signature.hbs index b46093cbdd..3ef6f0c38d 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.react-query.signature.hbs +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.react-query.signature.hbs @@ -38,7 +38,7 @@ {{#with typeParameters}} -{{{typeParameter}}} +{{{typeParameter sectionTitle=../name}}} {{/with}} diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.signature.hbs b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.signature.hbs index 5c8f207bd1..f089588eb3 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.signature.hbs +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/member.signature.hbs @@ -38,7 +38,7 @@ {{#with typeParameters}} -{{{typeParameter}}} +{{{typeParameter sectionTitle=../name}}} {{/with}} @@ -54,7 +54,7 @@ {{#with parameters}} -{{{parameter}}} +{{{parameter sectionTitle=../name}}} {{/with}} @@ -106,7 +106,7 @@ {{#with declaration.children}} -{{{typeDeclarationMembers}}} +{{{typeDeclarationMembers sectionTitle=../../name}}} {{/with}} diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/members.group.hbs b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/members.group.hbs index b5916ed434..5e85256a23 100755 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/members.group.hbs +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/partials/members.group.hbs @@ -34,7 +34,7 @@ ___ {{#with children}} -{{{parameterComponent}}} +{{{parameterComponent sectionTitle=../owningReflection.name}}} {{/with}} @@ -86,7 +86,7 @@ ___ {{#with children}} -{{{parameterComponent}}} +{{{parameterComponent sectionTitle=../owningReflection.name}}} {{/with}} diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/templates/reflection.hbs b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/templates/reflection.hbs index aeefbeaa80..bf6a6fca25 100755 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/templates/reflection.hbs +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/resources/templates/reflection.hbs @@ -32,7 +32,7 @@ {{#with model.typeParameters}} -{{{typeParameter}}} +{{{typeParameter sectionTitle=../model.name}}} {{/with}} diff --git a/docs-util/packages/typedoc-plugin-markdown-medusa/src/utils/format-parameter-component.ts b/docs-util/packages/typedoc-plugin-markdown-medusa/src/utils/format-parameter-component.ts index 8eb1e9d685..e73b6684ef 100644 --- a/docs-util/packages/typedoc-plugin-markdown-medusa/src/utils/format-parameter-component.ts +++ b/docs-util/packages/typedoc-plugin-markdown-medusa/src/utils/format-parameter-component.ts @@ -3,6 +3,7 @@ import { Parameter } from "../types" type FormatParameterComponentProps = { parameterComponent: string | undefined componentItems: Parameter[] + sectionTitle: string extraProps?: Record } @@ -43,6 +44,7 @@ export function formatParameterComponent({ parameterComponent, componentItems, extraProps, + sectionTitle, }: FormatParameterComponentProps): string { let extraPropsArr: string[] = [] if (extraProps) { @@ -54,5 +56,5 @@ export function formatParameterComponent({ componentItems = sortComponentItems(componentItems) return `<${parameterComponent} parameters={${JSON.stringify( componentItems - )}} ${extraPropsArr.join(" ")}/>` + )}} ${extraPropsArr.join(" ")} sectionTitle="${sectionTitle}"/>` } diff --git a/www/apps/docs/src/components/ParameterTypes/Items/index.tsx b/www/apps/docs/src/components/ParameterTypes/Items/index.tsx index 8df82996b7..ede8aa67ed 100644 --- a/www/apps/docs/src/components/ParameterTypes/Items/index.tsx +++ b/www/apps/docs/src/components/ParameterTypes/Items/index.tsx @@ -1,34 +1,53 @@ import { + CopyButton, DetailsSummary, ExpandableNotice, FeatureFlagNotice, InlineCode, MarkdownContent, } from "docs-ui" -import React from "react" +import React, { useEffect, useMemo, useRef, useState } from "react" import Details from "../../../theme/Details" import clsx from "clsx" import { Parameter } from ".." import { ArrowDownLeftMini, ArrowsPointingOutMini, + Link, TriangleRightMini, } from "@medusajs/icons" import IconFlagMini from "../../../theme/Icon/FlagMini" import decodeStr from "../../../utils/decode-str" +import { useLocation } from "@docusaurus/router" +import useDocusaurusContext from "@docusaurus/useDocusaurusContext" +import isInView from "../../../utils/is-in-view" -type ParameterTypesItemsProps = { - parameters: Parameter[] +type CommonProps = { level?: number expandUrl?: string + sectionTitle?: string } -const ParameterTypesItems = ({ - parameters, +type ParameterTypesItemProps = { + parameter: Parameter + elementKey: number +} & CommonProps & + React.AllHTMLAttributes + +const ParameterTypesItem = ({ + parameter, level = 1, expandUrl, -}: ParameterTypesItemsProps) => { - function getGroupName() { + elementKey, + sectionTitle, +}: ParameterTypesItemProps) => { + const location = useLocation() + + const { + siteConfig: { url }, + } = useDocusaurusContext() + + const groupName = useMemo(() => { switch (level) { case 1: return "group/parameterOne" @@ -39,8 +58,8 @@ const ParameterTypesItems = ({ case 4: return "group/parameterFour" } - } - function getBorderForGroupName() { + }, [level]) + const borderForGroupName = useMemo(() => { switch (level) { case 1: return "group-open/parameterOne:border-solid group-open/parameterOne:border-0 group-open/parameterOne:border-b" @@ -51,8 +70,8 @@ const ParameterTypesItems = ({ case 4: return "group-open/parameterFour:border-solid group-open/parameterFour:border-0 group-open/parameterFour:border-b" } - } - function getRotateForGroupName() { + }, [level]) + const rotateForGroupName = useMemo(() => { switch (level) { case 1: return "group-open/parameterOne:rotate-90" @@ -63,15 +82,52 @@ const ParameterTypesItems = ({ case 4: return "group-open/parameterFour:rotate-90" } - } + }, [level]) function getItemClassNames(details = true) { return clsx( "odd:[&:not(:first-child):not(:last-child)]:!border-y last:not(:first-child):!border-t", "first:!border-t-0 first:not(:last-child):!border-b last:!border-b-0 even:!border-y-0", - details && getGroupName(), - !details && getBorderForGroupName() + details && groupName, + !details && borderForGroupName ) } + const formatId = (str: string) => { + return str.replaceAll(" ", "_") + } + const parameterId = useMemo(() => { + return sectionTitle + ? `#${formatId(sectionTitle)}-${formatId( + parameter.name + )}-${level}-${elementKey}` + : "" + }, [sectionTitle, parameter, elementKey]) + const parameterPath = useMemo( + () => `${location.pathname}${parameterId}`, + [location, parameterId] + ) + const parameterUrl = useMemo( + () => `${url}${parameterPath}`, + [url, parameterPath] + ) + + const ref = useRef() + const [isSelected, setIsSelected] = useState(false) + + useEffect(() => { + if (!parameterId.length) { + return + } + + const shouldScroll = location.hash === parameterId + if (shouldScroll && !isSelected && ref.current && !isInView(ref.current)) { + ref.current.scrollIntoView({ + block: "center", + }) + } + + setIsSelected(shouldScroll) + }, [parameterId]) + function getSummary(parameter: Parameter, nested = true) { return ( { const targetElm = e.target as HTMLElement @@ -112,13 +169,15 @@ const ParameterTypesItems = ({ return } }} + summaryRef={!nested ? ref : undefined} + id={!nested && parameterId ? parameterId : ""} >
{nested && ( )} @@ -127,6 +186,21 @@ const ParameterTypesItems = ({ className={clsx("text-medusa-fg-subtle flip-y")} /> )} + {level === 1 && parameterId.length > 0 && ( + ) => { + e.preventDefault() + e.stopPropagation() + }} + > + + + )}
{decodeStr(parameter.name)} @@ -168,32 +242,48 @@ const ParameterTypesItems = ({ ) } + return ( + <> + {parameter.children?.length > 0 && ( +
+ {parameter.children && ( + + )} +
+ )} + {(parameter.children?.length || 0) === 0 && getSummary(parameter, false)} + + ) +} + +type ParameterTypesItemsProps = { + parameters: Parameter[] +} & CommonProps + +const ParameterTypesItems = ({ + parameters, + ...rest +}: ParameterTypesItemsProps) => { return (
- {parameters.map((parameter, key) => { - return ( - <> - {parameter.children?.length > 0 && ( -
- {parameter.children && ( - - )} -
- )} - {(parameter.children?.length || 0) === 0 && - getSummary(parameter, false)} - - ) - })} + {parameters.map((parameter, key) => ( + + ))}
) } diff --git a/www/apps/docs/src/components/ParameterTypes/index.tsx b/www/apps/docs/src/components/ParameterTypes/index.tsx index aa3754269f..5c52ad8469 100644 --- a/www/apps/docs/src/components/ParameterTypes/index.tsx +++ b/www/apps/docs/src/components/ParameterTypes/index.tsx @@ -16,6 +16,7 @@ export type Parameter = { type ParameterTypesType = { parameters: Parameter[] expandUrl?: string + sectionTitle?: string } & React.HTMLAttributes const ParameterTypesItems = lazy(async () => import("./Items")) @@ -34,6 +35,7 @@ const ParameterTypes = ({
diff --git a/www/apps/docs/src/utils/is-in-view.ts b/www/apps/docs/src/utils/is-in-view.ts new file mode 100644 index 0000000000..67649a3fdc --- /dev/null +++ b/www/apps/docs/src/utils/is-in-view.ts @@ -0,0 +1,10 @@ +export default function isInView(element: Element): boolean { + const rect = element.getBoundingClientRect() + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= + (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ) +} diff --git a/www/packages/docs-ui/src/components/CopyButton/index.tsx b/www/packages/docs-ui/src/components/CopyButton/index.tsx index 035577ca02..39274b7f8c 100644 --- a/www/packages/docs-ui/src/components/CopyButton/index.tsx +++ b/www/packages/docs-ui/src/components/CopyButton/index.tsx @@ -10,7 +10,8 @@ export type CopyButtonProps = { buttonClassName?: string tooltipClassName?: string tooltipText?: string -} & React.HTMLAttributes + onCopy?: (e: React.MouseEvent) => void +} & Omit, "onCopy"> export const CopyButton = ({ text, @@ -19,6 +20,7 @@ export const CopyButton = ({ tooltipText = "Copy to Clipboard", children, className, + onCopy, }: CopyButtonProps) => { const { isCopied, handleCopy } = useCopy(text) @@ -30,7 +32,10 @@ export const CopyButton = ({ > { + onCopy?.(e) + handleCopy() + }} > {children} diff --git a/www/packages/docs-ui/src/components/Details/Summary/index.tsx b/www/packages/docs-ui/src/components/Details/Summary/index.tsx index 2a8689a303..226c09641e 100644 --- a/www/packages/docs-ui/src/components/Details/Summary/index.tsx +++ b/www/packages/docs-ui/src/components/Details/Summary/index.tsx @@ -11,6 +11,7 @@ export type DetailsSummaryProps = { className?: string titleClassName?: string hideExpandableIcon?: boolean + summaryRef?: React.LegacyRef } & Omit, "title"> export const DetailsSummary = ({ @@ -23,6 +24,7 @@ export const DetailsSummary = ({ className, titleClassName, hideExpandableIcon = false, + summaryRef, ...rest }: DetailsSummaryProps) => { return ( @@ -36,6 +38,7 @@ export const DetailsSummary = ({ "no-marker", className )} + ref={summaryRef} {...rest} > diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js index 8b1d957016..877ca22a86 100644 --- a/www/packages/tailwind/base.tailwind.config.js +++ b/www/packages/tailwind/base.tailwind.config.js @@ -577,6 +577,17 @@ module.exports = { transform: "scale(1)", }, }, + flash: { + "0%": { + backgroundColor: "transparent", + }, + "50%": { + backgroundColor: "var(--animation-color)", + }, + "100%": { + backgroundColor: "transparent", + }, + }, }), animation: { fadeIn: "fadeIn 500ms", @@ -595,6 +606,7 @@ module.exports = { pulsingDots: "pulsingDots 1s alternate infinite", minimize: "minimize 500ms", maximize: "maximize 500ms", + flash: "flash 1500ms 1", }, }, fontFamily: { @@ -708,6 +720,9 @@ module.exports = { ".flip-y": { transform: "rotateY(180deg)", }, + ".animate-bg-surface": { + "--animation-color": "var(--docs-bg-subtle-pressed)", + }, }) addComponents({ ".btn-secondary-icon": {