mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
Core: Remove more deprecated APIs
This commit is contained in:
Fuma Nama
@@ -0,0 +1,9 @@
|
||||
---
|
||||
'fumadocs-core': major
|
||||
---
|
||||
|
||||
**Remove `fumadocs-core/sidebar` API**
|
||||
|
||||
why: no longer used by Fumadocs UI, and the abstraction isn't good enough.
|
||||
|
||||
migrate: The original component is mostly a wrapper of `react-remove-scroll`, you can use Shadcn UI for pre-built sidebars.
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: Sidebar
|
||||
description: The navigation bar at the side of the viewport
|
||||
---
|
||||
|
||||
A sidebar component which handles device resizing and removes scroll bar
|
||||
automatically.
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import * as Base from 'fumadocs-core/sidebar';
|
||||
|
||||
return (
|
||||
<Base.SidebarProvider>
|
||||
<Base.SidebarTrigger />
|
||||
<Base.SidebarList />
|
||||
</Base.SidebarProvider>
|
||||
);
|
||||
```
|
||||
|
||||
### Sidebar Provider
|
||||
|
||||
<AutoTypeTable
|
||||
path="./content/docs/headless/props.ts"
|
||||
name="SidebarProviderProps"
|
||||
/>
|
||||
|
||||
### Sidebar Trigger
|
||||
|
||||
Opens the sidebar on click.
|
||||
|
||||
<AutoTypeTable
|
||||
path="./content/docs/headless/props.ts"
|
||||
name="SidebarTriggerProps"
|
||||
/>
|
||||
|
||||
### Sidebar List
|
||||
|
||||
| Data Attribute | Values | Description |
|
||||
| -------------- | ------------- | --------------- |
|
||||
| `data-open` | `true, false` | Is sidebar open |
|
||||
|
||||
<AutoTypeTable
|
||||
path="./content/docs/headless/props.ts"
|
||||
type="SidebarContentProps"
|
||||
/>
|
||||
@@ -1,9 +1,7 @@
|
||||
import type * as Breadcrumb from 'fumadocs-core/breadcrumb';
|
||||
import type * as TOC from 'fumadocs-core/toc';
|
||||
import type * as Server from 'fumadocs-core/server';
|
||||
import type * as Search from 'fumadocs-core/search';
|
||||
import type * as Sidebar from 'fumadocs-core/sidebar';
|
||||
import type { ElementType } from 'react';
|
||||
import type * as PageTree from 'fumadocs-core/page-tree';
|
||||
import type * as MDX from 'fumadocs-core/mdx-plugins';
|
||||
|
||||
export type SortedResult = Search.SortedResult;
|
||||
@@ -12,18 +10,14 @@ export type StructureOptions = MDX.StructureOptions;
|
||||
|
||||
export type BreadcrumbItem = Breadcrumb.BreadcrumbItem;
|
||||
|
||||
export type SidebarProviderProps = Sidebar.SidebarProviderProps;
|
||||
export type SidebarContentProps = Sidebar.SidebarContentProps<ElementType>;
|
||||
export type SidebarTriggerProps = Sidebar.SidebarTriggerProps<ElementType>;
|
||||
|
||||
export type ScrollProviderProps = TOC.ScrollProviderProps;
|
||||
export type AnchorProviderProps = TOC.AnchorProviderProps;
|
||||
|
||||
export type TOCItemType = Server.TOCItemType;
|
||||
export type TOCItemType = TOC.TOCItemType;
|
||||
|
||||
export type PageTreeItem = Server.PageTree.Item;
|
||||
export type PageTreeFolder = Server.PageTree.Folder;
|
||||
export type PageTreeRoot = Server.PageTree.Root;
|
||||
export type PageTreeSeparator = Server.PageTree.Separator;
|
||||
export type PageTreeItem = PageTree.Item;
|
||||
export type PageTreeFolder = PageTree.Folder;
|
||||
export type PageTreeRoot = PageTree.Root;
|
||||
export type PageTreeSeparator = PageTree.Separator;
|
||||
|
||||
export type RemarkImageOptions = MDX.RemarkImageOptions;
|
||||
|
||||
@@ -12,10 +12,6 @@
|
||||
"author": "Fuma Nama",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./sidebar": {
|
||||
"import": "./dist/sidebar.js",
|
||||
"types": "./dist/sidebar.d.ts"
|
||||
},
|
||||
"./breadcrumb": {
|
||||
"import": "./dist/breadcrumb.js",
|
||||
"types": "./dist/breadcrumb.d.ts"
|
||||
@@ -123,7 +119,6 @@
|
||||
"negotiator": "^1.0.0",
|
||||
"npm-to-yarn": "^3.0.1",
|
||||
"path-to-regexp": "^8.3.0",
|
||||
"react-remove-scroll": "^2.7.1",
|
||||
"remark": "^15.0.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-rehype": "^11.1.2",
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
'use client';
|
||||
import {
|
||||
type ComponentPropsWithoutRef,
|
||||
createContext,
|
||||
type ElementType,
|
||||
type ReactElement,
|
||||
type ReactNode,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { RemoveScroll } from 'react-remove-scroll';
|
||||
import { useMediaQuery } from './utils/use-media-query';
|
||||
|
||||
const SidebarContext = createContext<SidebarContextType | null>(null);
|
||||
|
||||
type SidebarContextType = {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
};
|
||||
|
||||
export interface SidebarProviderProps {
|
||||
open?: boolean;
|
||||
onOpenChange?: (v: boolean) => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function useSidebarContext(): SidebarContextType {
|
||||
const ctx = useContext(SidebarContext);
|
||||
if (!ctx) throw new Error('Missing sidebar provider');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function SidebarProvider(props: SidebarProviderProps) {
|
||||
const [open, setOpen] =
|
||||
props.open === undefined
|
||||
? // eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useState(false)
|
||||
: [props.open, props.onOpenChange];
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider
|
||||
value={useMemo(
|
||||
() => ({ open, setOpen: setOpen ?? (() => undefined) }),
|
||||
[open, setOpen],
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
type AsProps<T extends ElementType> = Omit<
|
||||
ComponentPropsWithoutRef<T>,
|
||||
'as'
|
||||
> & {
|
||||
as?: T;
|
||||
};
|
||||
|
||||
export type SidebarTriggerProps<T extends ElementType> = AsProps<T>;
|
||||
|
||||
export function SidebarTrigger<T extends ElementType = 'button'>({
|
||||
as,
|
||||
...props
|
||||
}: SidebarTriggerProps<T>): ReactElement {
|
||||
const { open, setOpen } = useSidebarContext();
|
||||
const As = as ?? 'button';
|
||||
|
||||
return (
|
||||
<As
|
||||
aria-label="Toggle Sidebar"
|
||||
data-open={open}
|
||||
onClick={() => {
|
||||
setOpen(!open);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export type SidebarContentProps<T extends ElementType> = AsProps<T> & {
|
||||
/**
|
||||
* Disable scroll blocking when the viewport width is larger than a certain number (in pixels)
|
||||
*
|
||||
* @deprecated use `removeScrollOn`
|
||||
*/
|
||||
blockScrollingWidth?: number;
|
||||
|
||||
/**
|
||||
* A media query.
|
||||
*
|
||||
* When the sidebar is opening and media query is matched, scrolling outside the sidebar will be blocked.
|
||||
*
|
||||
* @example (max-width: 1000px)
|
||||
*/
|
||||
removeScrollOn?: string;
|
||||
};
|
||||
|
||||
export function SidebarList<T extends ElementType = 'aside'>({
|
||||
as,
|
||||
blockScrollingWidth,
|
||||
removeScrollOn = blockScrollingWidth
|
||||
? `(width < ${blockScrollingWidth}px)`
|
||||
: undefined,
|
||||
...props
|
||||
}: SidebarContentProps<T>): ReactElement {
|
||||
const { open } = useSidebarContext();
|
||||
const isBlocking =
|
||||
useMediaQuery(removeScrollOn ?? '', !removeScrollOn) ?? false;
|
||||
|
||||
return (
|
||||
<RemoveScroll
|
||||
as={as ?? 'aside'}
|
||||
data-open={open}
|
||||
enabled={isBlocking && open}
|
||||
{...props}
|
||||
>
|
||||
{props.children}
|
||||
</RemoveScroll>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ export default defineConfig({
|
||||
target: 'es2022',
|
||||
format: 'esm',
|
||||
entry: [
|
||||
'src/{toc,link,breadcrumb,sidebar,dynamic-link,hide-if-empty}.tsx',
|
||||
'src/{toc,link,breadcrumb,dynamic-link,hide-if-empty}.tsx',
|
||||
'src/{source,mdx-plugins,page-tree}/index.ts',
|
||||
'src/{negotiation,content}/*',
|
||||
'src/source/plugins/lucide-icons.ts',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["remark-stringify"],
|
||||
"types": ["remark-stringify", "@types/node"],
|
||||
"noEmit": true,
|
||||
"lib": ["ESNext"],
|
||||
"module": "ESNext",
|
||||
|
||||
Generated
+3
-7
Reference in New Issue
Block a user