hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-26 06:31:49 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

UI: Remove RollButton component

Browse Source
This commit is contained in:
fuma-nama
2024-07-25 21:53:40 +08:00
parent a00807fbcc
commit 4373231125
5 changed files with 9 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/wicked-shrimps-build.md
+9
View File
@@ -0,0 +1,9 @@
---
'fumadocs-ui': major
---
**Remove `RollButton` component**
**why:** `RollButton` was created because there were no "Table Of Contents" on mobile viewports. Now users can use the TOC Popover to switch between headings, `RollButton` is no longer a suitable design for Fumadocs UI.
**migrate:** Remove usages, you may copy the [last implementation of `RollButton`](https://github.com/fuma-nama/fumadocs/blob/fumadocs-ui%4012.5.6/packages/ui/src/components/roll-button.tsx).
apps/docs/components/preview/index.tsx
-10
View File
@@ -14,10 +14,6 @@ import BannerImage from '@/public/banner.png';
import { modes } from '@/utils/modes';
import { Wrapper } from './wrapper';
const RollButton = dynamic(() =>
import('fumadocs-ui/components/roll-button').then((m) => m.RollButton),
);
const Banner = dynamic(() =>
import('fumadocs-ui/components/banner').then((m) => m.Banner),
);
@@ -209,12 +205,6 @@ export default {
</div>
</Wrapper>
),
'roll-button': (
<div className="rounded-lg border bg-fd-card p-4 text-fd-muted-foreground">
<RollButton />
<p className="text-center text-sm">Scroll down to see the button</p>
</div>
),
'root-toggle': (
<Wrapper>
<div className="not-prose rounded-xl bg-fd-background p-3">
apps/docs/content/docs/ui/components/roll-button.mdx
-76
View File
@@ -1,76 +0,0 @@
---
title: Roll Button
description: A button that scrolls to the top
preview: roll-button
---
A button that scrolls to the top.
## Usage
Add this component to your page.
```tsx title="app/docs/[[...slug]]/page.tsx"
import { RollButton } from 'fumadocs-ui/components/roll-button';
<DocsPage toc={toc}>
<RollButton />
<DocsBody>
<h1>{page.title}</h1>
<MDX />
</DocsBody>
</DocsPage>;
```
### Reference
```json doc-gen:typescript
{
"file": "./content/docs/ui/props.ts",
"name": "RollButtonProps"
}
```
## Example
Try scroll down and see the button.
<Test />
export function Test() {
return (
<div className="p-4 border text-fd-secondary-foreground rounded-md">
<h2>Mera maligno</h2>
<p>
Ire illa aurum virgo membra. In <strong>Aeeta</strong>, Proteu, genus
aderis dives curam refluitque proles: quibus nullaque curvat: iam non.{' '}
<strong>Illa silvas terres</strong>
montis frena proelia, est revertentes auras adsuetudine et nata. Venenis
ope cum referebam, ortus! Origine at, <strong>ulli sed</strong> illa
tamen
<strong>at alte coronae</strong>
creatis praerupit armiger.
</p>
<ol>
<li>Phoebus abit poscunt utque ad flammae conata</li>
<li>Bello auro officio</li>
<li>Pectora duc viscera genitor adplicor munera</li>
<li>Quod nepotibus visa eminet cui sub proxima</li>
</ol>
<h2>Mea quoque mundo</h2>
<p>
Deae poena? Illam oculos eadem, sepulcrum, nec perdiderant videt
Cererisque, pressos <strong>bracchiaque pallam quodque</strong>{' '}
conprecor. Pater septem decidere agitantia captivarumque propioris illa
monere condita utilitas terras` adunco. Dextera altera vulnere
radiantibus tanto. Mactare ille idem vehebat mentes.
</p>
<blockquote>Lycaei bellum dictum caede, dixit? Quid siquos.</blockquote>
</div>
); }
apps/docs/content/docs/ui/props.ts
-3
View File
@@ -9,7 +9,6 @@ import type {
} from 'fumadocs-ui/components/api';
import type { File, Folder } from 'fumadocs-ui/components/files';
import type { InlineTOC } from 'fumadocs-ui/components/inline-toc';
import type { RollButton } from 'fumadocs-ui/components/roll-button';
import type { TypeTable } from 'fumadocs-ui/components/type-table';
import type { Card } from 'fumadocs-ui/components/card';
import type { DocsLayoutProps } from 'fumadocs-ui/layout';
@@ -77,8 +76,6 @@ export type CardProps = Omit<
keyof Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>
>;
export type RollButtonProps = ComponentPropsWithoutRef<typeof RollButton>;
export type TypeTableProps = ComponentPropsWithoutRef<typeof TypeTable>;
export type ObjectTypeProps = ComponentPropsWithoutRef<
packages/ui/src/components/roll-button.tsx
-76
View File
@@ -1,76 +0,0 @@
'use client';
import { ChevronUp } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { usePathname } from 'next/navigation';
import { cn } from '@/utils/cn';
import { buttonVariants } from '@/theme/variants';
import { useTreeContext } from '@/contexts/tree';
interface RollButtonProps {
/**
* Percentage of scroll position to display the roll button
*
* @defaultValue 0.1
*/
percentage?: number;
}
/**
* A button that scrolls to the top
*/
export function RollButton({
percentage = 0.1,
}: RollButtonProps): React.ReactElement {
const [show, setShow] = useState(false);
const { navigation } = useTreeContext();
const pathname = usePathname();
const current = useMemo(
() => navigation.find((item) => item.url === pathname),
[pathname, navigation],
);
useEffect(() => {
const listener = (): void => {
const element = document.scrollingElement;
if (!element) return;
const nearTop =
element.scrollHeight === element.clientHeight ||
element.scrollTop / (element.scrollHeight - element.clientHeight) <
percentage;
setShow(!nearTop);
};
listener();
window.addEventListener('scroll', listener);
return () => {
window.removeEventListener('scroll', listener);
};
}, [percentage]);
return (
<button
type="button"
aria-label="Scroll to Top"
className={cn(
buttonVariants({
color: 'secondary',
className:
'fixed top-[72px] [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-12 lg:top-4',
}),
!show && 'pointer-events-none translate-y-20 opacity-0',
)}
onClick={useCallback(() => {
document.scrollingElement?.scrollTo({
top: 0,
behavior: 'smooth',
});
}, [])}
>
{current?.icon ?? <ChevronUp />}
{current?.name}
</button>
);
}