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

docs: redesign help button (#8610)

Browse Source 
Redesign help button

Closes DOCS-817
This commit is contained in:
Shahed Nasser
2024-08-16 09:40:05 +03:00
committed by GitHub
parent 0cc2a62b9b
commit 9bdcdc76a8
11 changed files with 109 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
www/apps/book/providers/index.tsx
View File

@@ -3,7 +3,6 @@
import {
AnalyticsProvider,
ColorModeProvider,
helpButtonNotification,
HooksLoader,
LearningPathProvider,
MobileProvider,
@@ -30,7 +29,7 @@ const Providers = ({ children }: ProvidersProps) => {
<ColorModeProvider>
<ModalProvider>
<LearningPathProvider>
<NotificationProvider initial={[helpButtonNotification]}>
<NotificationProvider>
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<PaginationProvider>

3
www/apps/resources/providers/index.tsx
View File

@@ -3,7 +3,6 @@
import {
AnalyticsProvider,
ColorModeProvider,
helpButtonNotification,
HooksLoader,
LearningPathProvider,
MobileProvider,
@@ -32,7 +31,7 @@ const Providers = ({ children }: ProvidersProps) => {
<LearningPathProvider
baseUrl={process.env.NEXT_PUBLIC_BASE_PATH || "/resources"}
>
<NotificationProvider initial={[helpButtonNotification]}>
<NotificationProvider>
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<PaginationProvider>

52
www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx
View File

@@ -1,52 +0,0 @@
"use client"
import { Bug, Discord, Github } from "@medusajs/icons"
import clsx from "clsx"
import Link from "next/link"
import React from "react"
export const HelpButtonActions = () => {
const actions = [
{
title: "Troubleshooting Guides",
url: "https://docs.medusajs.com/v2/resources/troubleshooting",
icon: <Bug />,
},
{
title: "Create a GitHub Issue",
url: "https://github.com/medusajs/medusa/issues/new/choose",
icon: <Github />,
},
{
title: "Get Support on Discord",
url: "https://discord.gg/medusajs",
icon: <Discord />,
},
]
return (
<div
className={clsx(
"bg-medusa-bg-component shadow-elevation-flyout",
"flex flex-col rounded-docs_DEFAULT",
"mr-0 ml-auto"
)}
>
{actions.map((action, index) => (
<Link
href={action.url}
className={clsx(
"px-docs_0.5 py-docs_0.25 text-medusa-fg-base",
"flex flex-row items-center gap-docs_0.5",
"hover:bg-medusa-bg-component-hover",
index !== 0 && "border-t border-medusa-border-base border-solid"
)}
key={index}
target="_blank"
>
{action.icon}
<span>{action.title}</span>
</Link>
))}
</div>
)
}

86
www/packages/docs-ui/src/components/HelpButton/index.tsx
View File

@@ -1,86 +0,0 @@
"use client"
import React, { useEffect, useRef, useState } from "react"
import { Button } from "@/components"
import clsx from "clsx"
import { CSSTransition } from "react-transition-group"
import { HelpButtonActions } from "./Actions"
import { useClickOutside } from "../.."
export const HelpButton = () => {
const [showText, setShowText] = useState(false)
const [showHelp, setShowHelp] = useState(false)
const ref = useRef<HTMLDivElement>(null)
useClickOutside({
elmRef: ref,
onClickOutside: () => {
setShowHelp(false)
setShowText(false)
},
})
useEffect(() => {
if (showHelp) {
setShowText(true)
}
}, [showHelp])
return (
<div
className={clsx(
"mr-0 ml-auto w-fit",
"flex flex-col gap-docs_0.5",
"max-[767px]:fixed max-[767px]:bottom-docs_1 max-[767px]:right-docs_1"
)}
ref={ref}
>
{showHelp && <HelpButtonActions />}
<Button
variant="secondary"
className={clsx(
"!p-[10px] !shadow-elevation-flyout dark:!shadow-elevation-flyout-dark !text-medusa-fg-subtle",
"rounded-full border-0 !flex relative mr-0 ml-auto",
"h-docs_3 min-w-docs_3 !txt-medium-plus lg:txt-large-plus transition-[width] duration-300",
!showText && "!gap-0"
)}
onMouseOver={() => setShowText(true)}
onMouseLeave={() => {
if (!showHelp) {
setShowText(false)
}
}}
onClick={() => {
setShowHelp((prev) => !prev)
}}
>
<CSSTransition
in={showText}
timeout={300}
onEnter={(node: HTMLElement) => {
node.style.width = `0px`
}}
onEntering={(node: HTMLElement) => {
node.style.width = `${node.scrollWidth}px`
setTimeout(() => {
node.style.opacity = `1`
}, 100)
}}
onExiting={(node: HTMLElement) => {
node.style.width = `0px`
node.style.opacity = `0`
}}
>
<span
className={clsx("opacity-0 w-0 text-nowrap")}
style={{
transition: `width cubic-bezier(0.4, 0, 0.2, 1) 300ms, opacity cubic-bezier(0.4, 0, 0.2, 1) 150ms`,
}}
>
Need help
</span>
</CSSTransition>
<span>?</span>
</Button>
</div>
)
}

22
www/packages/docs-ui/src/components/Icons/Github/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react"
import { IconProps } from "@medusajs/icons/dist/types"
export const GithubIcon = (props: IconProps) => {
return (
<svg
width="15"
height="16"
viewBox="0 0 15 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.5 1.41663C3.77063 1.41663 0.75 4.43725 0.75 8.16663C0.75 11.1535 2.68219 13.6763 5.36531 14.5707C5.70281 14.6298 5.82938 14.4273 5.82938 14.2501C5.82938 14.0898 5.82094 13.5582 5.82094 12.9929C4.125 13.3051 3.68625 12.5794 3.55125 12.1998C3.47531 12.0057 3.14625 11.4066 2.85938 11.2463C2.62312 11.1198 2.28562 10.8076 2.85094 10.7991C3.3825 10.7907 3.76219 11.2885 3.88875 11.491C4.49625 12.5119 5.46656 12.2251 5.85469 12.0479C5.91375 11.6091 6.09094 11.3138 6.285 11.1451C4.78312 10.9763 3.21375 10.3941 3.21375 7.81225C3.21375 7.07819 3.47531 6.47069 3.90562 5.99819C3.83812 5.82944 3.60188 5.13756 3.97312 4.20944C3.97312 4.20944 4.53844 4.03225 5.82938 4.90131C6.36938 4.74944 6.94313 4.6735 7.51688 4.6735C8.09063 4.6735 8.66438 4.74944 9.20438 4.90131C10.4953 4.02381 11.0606 4.20944 11.0606 4.20944C11.4319 5.13756 11.1956 5.82944 11.1281 5.99819C11.5584 6.47069 11.82 7.06975 11.82 7.81225C11.82 10.4026 10.2422 10.9763 8.74031 11.1451C8.985 11.356 9.19594 11.761 9.19594 12.3938C9.19594 13.2966 9.1875 14.0223 9.1875 14.2501C9.1875 14.4273 9.31406 14.6382 9.65156 14.5707C12.3178 13.6763 14.25 11.1451 14.25 8.16663C14.25 4.43725 11.2294 1.41663 7.5 1.41663Z"
fill="currentColor"
/>
</svg>
)
}

76
www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client"
import React, { useRef, useState } from "react"
import { Button, Kbd, Tooltip } from "@/components"
import { Bug, Discord, QuestionMark } from "@medusajs/icons"
import { Menu, useClickOutside } from "../../.."
import { MenuItem } from "types"
import clsx from "clsx"
import { GithubIcon } from "../../Icons/Github"
export const MainNavHelpButton = () => {
const [showMenu, setShowMenu] = useState(false)
const ref = useRef<HTMLDivElement>(null)
useClickOutside({
elmRef: ref,
onClickOutside: () => {
setShowMenu(false)
},
})
const menuItems: MenuItem[] = [
{
type: "link",
title: "Create a GitHub Issue",
link: "https://github.com/medusajs/medusa/issues/new/choose",
icon: <GithubIcon className="text-medusa-fg-base" />,
},
{
type: "link",
title: "Get Support on Discord",
link: "https://discord.gg/medusajs",
icon: <Discord />,
},
{
type: "divider",
},
{
type: "link",
title: "Troubleshooting Guides",
link: "https://docs.medusajs.com/v2/resources/troubleshooting",
icon: <Bug />,
},
]
return (
<div className="relative" ref={ref}>
<Tooltip
tooltipChildren={
<span className="flex gap-[6px]">
<span>Need help?</span>
<Kbd>?</Kbd>
</span>
}
place="bottom"
hidden={showMenu}
>
<Button
variant="transparent-clear"
className="text-medusa-fg-muted"
onClick={() => setShowMenu((prev) => !prev)}
>
<QuestionMark />
</Button>
</Tooltip>
<div
className={clsx(
"absolute bottom-0 left-0",
"z-50 -translate-x-[40%] translate-y-[calc(100%+8px)]",
!showMenu && "hidden"
)}
>
<Menu items={menuItems} className="w-[200px]" />
</div>
</div>
)
}

2
www/packages/docs-ui/src/components/MainNav/index.tsx
View File

@@ -9,6 +9,7 @@ import { MainNavColorMode } from "./ColorMode"
import Link from "next/link"
import { MainNavDivider } from "./Divider"
import { MainNavSidebarOpener } from "./SidebarOpener"
import { MainNavHelpButton } from "./HelpButton"
import { SidebarLeftIcon } from "../Icons/SidebarLeft"
export const MainNav = () => {
@@ -39,6 +40,7 @@ export const MainNav = () => {
Report Issue
</Link>
<MainNavDivider />
<MainNavHelpButton />
<MainNavColorMode />
<SearchModalOpener />
</div>

4
www/packages/docs-ui/src/components/Menu/Action/index.tsx
View File

@@ -20,7 +20,9 @@ export const MenuAction = ({ item }: MenuActionProps) => {
tabIndex={-1}
onClick={item.action}
>
<span className="text-medusa-fg-subtle">{item.icon}</span>
<span className="text-medusa-fg-subtle mt-[2.5px] block">
{item.icon}
</span>
<span className="text-compact-small flex-1">{item.title}</span>
{item.shortcut && (
<span className="text-medusa-fg-subtle text-compact-small">

4
www/packages/docs-ui/src/components/Menu/Item/index.tsx
View File

@@ -20,7 +20,9 @@ export const MenuItem = ({ item }: MenuItemProps) => {
)}
href={item.link}
>
<span className="text-medusa-fg-subtle">{item.icon}</span>
<span className="text-medusa-fg-subtle mt-[2.5px] block">
{item.icon}
</span>
<span className="text-compact-small">{item.title}</span>
</Link>
)

1
www/packages/docs-ui/src/components/index.ts
View File

@@ -22,7 +22,6 @@ export * from "./ExpandableNotice"
export * from "./FeatureFlagNotice"
export * from "./Feedback"
export * from "./Feedback/Solutions"
export * from "./HelpButton"
export * from "./HooksLoader"
export * from "./Icons"
export * from "./InlineIcon"

8
www/packages/docs-ui/src/constants.tsx
View File

@@ -1,8 +1,7 @@
import React from "react"
import { Badge, HelpButton } from "@/components"
import { Badge } from "@/components"
import { OptionType } from "@/hooks"
import { NavigationDropdownItem, SidebarItem } from "types"
import { NotificationItemType } from "@/providers"
import { NavigationDropdownDocIcon } from "./components/Icons/NavigationDropdown/Doc"
import { NavigationDropdownStoreIcon } from "./components/Icons/NavigationDropdown/Store"
import { NavigationDropdownAdminIcon } from "./components/Icons/NavigationDropdown/Admin"
@@ -233,8 +232,3 @@ export const searchFiltersV1: OptionType[] = [
label: "UI",
},
]
export const helpButtonNotification: NotificationItemType = {
layout: "empty",
children: <HelpButton />,
}