asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: update to next 15 + eslint 9 (#9839)

Browse Source 
* update next

* updated react

* update eslint

* finish updating eslint

* fix content lint errors

* fix docs test

* fix vale action

* fix installation errors
This commit is contained in:
Shahed Nasser authored and GitHub committed 2024-11-13 17:03:17 +02:00
1 parent 6f7467f071
commit 938f3bd934
143 files changed
+4193 -3226
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/packages/docs-ui/src/hooks/use-active-on-scroll/index.tsx
+8 -8
View File
@@ -108,8 +108,8 @@ export const useActiveOnScroll = ({
const halfway = isElmWindow(scrollableElement)
? scrollableElement.innerHeight / 2
: scrollableElement
? scrollableElement.scrollHeight / 2
: 0
? scrollableElement.scrollHeight / 2
: 0
headings?.forEach((heading) => {
if (heading.id === hash) {
@@ -145,12 +145,12 @@ export const useActiveOnScroll = ({
chosenClosest
? (chosenClosest as HTMLHeadingElement).id
: selectedHeadingByHash
? (selectedHeadingByHash as HTMLHeadingElement).id
: items.length
? useDefaultIfNoActive
? items[0].heading.id
: ""
: ""
? (selectedHeadingByHash as HTMLHeadingElement).id
: items.length
? useDefaultIfNoActive
? items[0].heading.id
: ""
: ""
)
}, [getHeadingsInElm, items, enable])
www/packages/docs-ui/src/hooks/use-click-outside/index.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect } from "react"
import { useIsBrowser } from "../.."
export type UseClickOutsideProps = {
elmRef: React.RefObject<HTMLElement>
elmRef: React.RefObject<HTMLElement | null>
onClickOutside: (e: MouseEvent) => void
}
www/packages/docs-ui/src/hooks/use-collapsible-code-lines/index.tsx
+4 -2
View File
@@ -7,7 +7,7 @@ import {
TokenInputProps,
TokenOutputProps,
} from "prism-react-renderer"
import React, { useCallback, useMemo } from "react"
import React, { useCallback, useMemo, useRef } from "react"
import { CodeBlockCollapsibleLines } from "../../components/CodeBlock/Collapsible/Lines"
import { useCollapsible } from "../use-collapsible"
@@ -22,7 +22,7 @@ export type CollapsibleCodeLines = {
token: Token[][],
highlightProps: HighlightProps,
lineNumberOffset?: number
) => React.ReactNode
) => React.JSX.Element[]
}
export type CollapsedCodeLinesPosition = "start" | "end"
@@ -65,10 +65,12 @@ export const useCollapsibleCodeLines = ({
return collapsedRange.start === 1 ? "start" : "end"
}, [collapsedRange])
const ref = useRef(null)
const collapsibleHookResult = useCollapsible({
unmountOnExit: false,
translateEnabled: false,
heightAnimation: true,
childrenRef: ref,
})
const getCollapsedLinesElm = useCallback(
www/packages/docs-ui/src/hooks/use-collapsible/index.tsx
+86 -48
View File
@@ -1,6 +1,7 @@
"use client"
import React, { useState } from "react"
// @ts-expect-error can't install the types package because it doesn't support React v19
import { CSSTransition } from "react-transition-group"
export type CollapsibleProps = {
@@ -9,6 +10,7 @@ export type CollapsibleProps = {
translateEnabled?: boolean
onClose?: () => void
unmountOnExit?: boolean
childrenRef?: React.RefObject<HTMLElement | null>
}
export type CollapsibleReturn = {
@@ -23,59 +25,95 @@ export const useCollapsible = ({
translateEnabled = true,
onClose,
unmountOnExit = true,
childrenRef,
}: CollapsibleProps): CollapsibleReturn => {
const [collapsed, setCollapsed] = useState(initialValue)
const getCollapsibleElms = (children: React.ReactNode) => (
<CSSTransition
unmountOnExit={unmountOnExit}
in={!collapsed}
timeout={150}
onEnter={(node: HTMLElement) => {
if (heightAnimation) {
node.classList.add("transition-[height]")
node.style.height = `0px`
} else {
node.classList.add("!mb-docs_2", "!mt-0")
if (translateEnabled) {
node.classList.add("translate-y-docs_1", "transition-transform")
const getNodeFromChildrenRef = () => {
return (
(childrenRef?.current?.firstElementChild as HTMLElement) ||
childrenRef?.current
)
}
const getCollapsibleElms = (children: React.ReactNode) => {
return (
<CSSTransition
unmountOnExit={unmountOnExit}
in={!collapsed}
timeout={150}
nodeRef={childrenRef}
onEnter={() => {
const node = getNodeFromChildrenRef()
if (!node) {
return
}
}
}}
onEntering={(node: HTMLElement) => {
if (heightAnimation) {
node.style.height = `${node.scrollHeight}px`
}
}}
onEntered={(node: HTMLElement) => {
if (heightAnimation) {
node.style.height = `auto`
}
}}
onExit={(node: HTMLElement) => {
if (heightAnimation) {
node.style.height = `${node.scrollHeight}px`
} else {
if (translateEnabled) {
node.classList.add("transition-transform", "!-translate-y-docs_1")
if (heightAnimation) {
node.classList.add("transition-[height]")
node.style.height = `0px`
} else {
node.classList.add("!mb-docs_2", "!mt-0")
if (translateEnabled) {
node.classList.add("translate-y-docs_1", "transition-transform")
}
}
setTimeout(() => {
onClose?.()
}, 100)
}
}}
onExiting={(node: HTMLElement) => {
if (heightAnimation) {
node.style.height = `0px`
setTimeout(() => {
onClose?.()
}, 100)
}
}}
>
{children}
</CSSTransition>
)
}}
onEntering={() => {
const node = getNodeFromChildrenRef()
if (!node) {
return
}
if (heightAnimation) {
node.style.height = `${node.scrollHeight}px`
}
}}
onEntered={() => {
const node = getNodeFromChildrenRef()
if (!node) {
return
}
if (heightAnimation) {
node.style.height = `auto`
}
}}
onExit={() => {
const node = getNodeFromChildrenRef()
if (!node) {
return
}
if (heightAnimation) {
node.style.height = `${node.scrollHeight}px`
} else {
if (translateEnabled) {
node.classList.add("transition-transform", "!-translate-y-docs_1")
}
setTimeout(() => {
onClose?.()
}, 100)
}
}}
onExiting={() => {
const node = getNodeFromChildrenRef()
if (!node) {
return
}
if (heightAnimation) {
node.style.height = `0px`
setTimeout(() => {
onClose?.()
}, 100)
}
}}
>
{children}
</CSSTransition>
)
}
return {
getCollapsibleElms,
www/packages/docs-ui/src/hooks/use-page-scroll-manager/index.tsx
+13 -7
View File
@@ -18,11 +18,7 @@ export const usePageScrollManager = () => {
.map((nav) => (nav as PerformanceNavigationTiming).type)
.includes("reload")
useEffect(() => {
if (!scrollableElement || !checkedPageReload) {
return
}
const tryToScroll = () => {
if (getScrolledTop(scrollableElement) !== 0 && !location.hash) {
scrollableElement?.scrollTo({
top: 0,
@@ -36,7 +32,13 @@ export const usePageScrollManager = () => {
targetElm?.scrollIntoView()
}
}, [pathname, scrollableElement, checkedPageReload])
}
useEffect(() => {
if (checkedPageReload) {
setCheckedPageReload(false)
}
}, [pathname])
useEffect(() => {
if (!scrollableElement || checkedPageReload) {
@@ -49,8 +51,12 @@ export const usePageScrollManager = () => {
scrollableElement?.scrollTo({
top: parseInt(loadedScrollPosition),
})
localStorage.removeItem("scrollPos")
} else {
tryToScroll()
}
localStorage.removeItem("scrollPos")
} else {
tryToScroll()
}
setCheckedPageReload(true)
www/packages/docs-ui/src/hooks/use-request-runner/index.ts
+5 -1
View File
@@ -45,7 +45,11 @@ export const useRequestRunner = ({
})
.then((data) => {
const stringifiedData = JSON.stringify(data, undefined, 2)
replaceLog ? replaceLog(stringifiedData) : pushLog(stringifiedData)
if (replaceLog) {
replaceLog(stringifiedData)
} else {
pushLog(stringifiedData)
}
})
.catch((error) => {
pushLog(`\nAn error ocurred: ${JSON.stringify(error, undefined, 2)}`)
www/packages/docs-ui/src/hooks/use-scroll-utils/index.tsx
+6 -6
View File
@@ -39,7 +39,7 @@ export function useEvent<T extends EventFunc>(callback: T): T {
* Gets `value` from the last render.
*/
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>()
const ref = useRef<T>(undefined)
useLayoutEffect(() => {
ref.current = value
@@ -96,10 +96,10 @@ function useScrollControllerContextValue({
parentTop !== undefined
? parentTop
: isElmWindow(scrollableElement)
? 0
: scrollableElement instanceof HTMLElement
? scrollableElement.offsetTop
: 0
? 0
: scrollableElement instanceof HTMLElement
? scrollableElement.offsetTop
: 0
scrollableElement?.scrollTo({
// 56 is the height of the navbar
@@ -137,7 +137,7 @@ export function ScrollControllerProvider({
children: ReactNode
scrollableSelector?: string
restoreScrollOnReload?: boolean
}): JSX.Element {
}) {
const value = useScrollControllerContextValue({
scrollableSelector,
})
www/packages/docs-ui/src/hooks/use-select/index.tsx
+5 -3
View File
@@ -63,9 +63,11 @@ export const useSelect = ({
const handleChange = (selectedValue: string, wasSelected: boolean) => {
if (multiple) {
wasSelected
? removeSelected?.(selectedValue)
: addSelected?.(selectedValue)
if (wasSelected) {
removeSelected?.(selectedValue)
} else {
addSelected?.(selectedValue)
}
} else {
setSelected?.(selectedValue)
}