diff --git a/packages/actions/package.json b/packages/actions/package.json index a263d107e9b2..d23aa10aaa5c 100644 --- a/packages/actions/package.json +++ b/packages/actions/package.json @@ -6,8 +6,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format" }, "main": "./dist/index.mjs", diff --git a/packages/builders/package.json b/packages/builders/package.json index 3742a06e26d1..dcd0fc308283 100644 --- a/packages/builders/package.json +++ b/packages/builders/package.json @@ -5,8 +5,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format", "docs": "downlevel-dts . docs --to=3.7 && docgen -i src/index.ts -c docs/index.json -o docs/docs.json --typescript && api-extractor run --local", "prepack": "yarn lint && yarn test && yarn build", diff --git a/packages/collection/package.json b/packages/collection/package.json index 3d48a4bd72da..cbf55a3629db 100644 --- a/packages/collection/package.json +++ b/packages/collection/package.json @@ -5,8 +5,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format", "docs": "downlevel-dts . docs --to=3.7 && docgen -i src/index.ts -c docs/index.json -o docs/docs.json --typescript && api-extractor run --local", "prepack": "yarn lint && yarn test && yarn build", diff --git a/packages/docgen/package.json b/packages/docgen/package.json index 30ac038db0f0..d185108ff382 100644 --- a/packages/docgen/package.json +++ b/packages/docgen/package.json @@ -4,8 +4,8 @@ "description": "The docs.json generator for discord.js and its related projects", "scripts": { "build": "unbuild", - "lint": "prettier --check . && eslint src --ext mjs,js,ts", - "format": "prettier --write . && eslint src --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src --ext mjs,js,ts --fix", "fmt": "yarn format", "prepack": "yarn format && yarn build", "changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/docgen/*'", @@ -50,7 +50,7 @@ "devDependencies": { "@favware/cliff-jumper": "^1.8.6", "@types/jsdoc-to-markdown": "^7.0.3", - "@types/node": "^16.11.47", + "@types/node": "^16.11.48", "@typescript-eslint/eslint-plugin": "^5.33.0", "@typescript-eslint/parser": "^5.33.0", "eslint": "^8.22.0", @@ -61,7 +61,7 @@ "prettier": "^2.7.1", "rollup-plugin-typescript2": "0.32.1", "typescript": "^4.7.4", - "unbuild": "^0.8.4" + "unbuild": "^0.8.8" }, "engines": { "node": ">=16.9.0" diff --git a/packages/proxy-container/package.json b/packages/proxy-container/package.json index b2918f1cdf09..b8d48e717fe9 100644 --- a/packages/proxy-container/package.json +++ b/packages/proxy-container/package.json @@ -4,8 +4,8 @@ "description": "Lightweight HTTP proxy for Discord's API, brought to you as a container 📦", "scripts": { "build": "unbuild", - "lint": "prettier --check . && eslint src --ext mjs,js,ts", - "format": "prettier --write . && eslint src --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src --ext mjs,js,ts --fix", "fmt": "yarn format", "prepack": "yarn lint && yarn test && yarn build", "changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/proxy-container/*'" diff --git a/packages/proxy/package.json b/packages/proxy/package.json index 0af6d44eb16f..a9e6d11578f8 100644 --- a/packages/proxy/package.json +++ b/packages/proxy/package.json @@ -5,8 +5,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format", "docs": "downlevel-dts . docs --to=3.7 && docgen -i src/index.ts -c docs/index.json -o docs/docs.json --typescript && api-extractor run --local", "prepack": "yarn lint && yarn test && yarn build", diff --git a/packages/rest/package.json b/packages/rest/package.json index f0840d18a44d..36be1f423a5c 100644 --- a/packages/rest/package.json +++ b/packages/rest/package.json @@ -5,8 +5,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format", "docs": "downlevel-dts . docs --to=3.7 && docgen -i src/index.ts -c docs/index.json -o docs/docs.json --typescript && api-extractor run --local", "prepack": "yarn lint && yarn test && yarn build", diff --git a/packages/scripts/package.json b/packages/scripts/package.json index c32e14e1216d..5ea088805a30 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -6,8 +6,8 @@ "scripts": { "test": "vitest run", "build": "unbuild", - "lint": "prettier --check . && eslint src --ext mjs,js,ts", - "format": "prettier --write . && eslint src --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src --ext mjs,js,ts --fix", "fmt": "yarn format" }, "main": "./dist/index.cjs", diff --git a/packages/voice/package.json b/packages/voice/package.json index eb79067777ca..6c3e6c54f6a7 100644 --- a/packages/voice/package.json +++ b/packages/voice/package.json @@ -5,8 +5,8 @@ "scripts": { "build": "unbuild", "test": "jest --coverage", - "lint": "prettier --check . && eslint src __tests__ --ext mjs,js,ts", - "format": "prettier --write . && eslint src __tests__ --ext mjs,js,ts --fix", + "lint": "prettier --check . && TIMING=1 eslint src __tests__ --ext mjs,js,ts", + "format": "prettier --write . && TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix", "fmt": "yarn format", "docs": "downlevel-dts . docs --to=3.7 && docgen -i src/index.ts -c docs/index.json -o docs/docs.json --typescript && api-extractor run --local", "prepack": "yarn lint && yarn test && yarn build", diff --git a/packages/website/package.json b/packages/website/package.json index 298667d88f39..157309a07f9b 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -12,8 +12,8 @@ "dev:next": "next dev", "dev:css": "yarn generate:css --watch", "generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css", - "lint": "prettier --check . && eslint src --ext mjs,js,ts,tsx", - "format": "prettier --write . && eslint src --ext mjs,js,ts,tsx --fix" + "lint": "prettier --check . && TIMING=1 eslint src --ext mjs,js,ts,tsx", + "format": "prettier --write . && TIMING=1 eslint src --ext mjs,js,ts,tsx --fix" }, "main": "./dist/index.js", "module": "./dist/index.mjs", @@ -47,11 +47,17 @@ }, "homepage": "https://discord.js.org", "dependencies": { + "@emotion/react": "^11.10.0", + "@emotion/server": "^11.10.0", + "@mantine/core": "^5.1.6", + "@mantine/hooks": "^5.1.6", + "@mantine/next": "^5.1.6", + "@mantine/nprogress": "^5.1.6", + "@mantine/spotlight": "^5.1.6", "@microsoft/api-extractor-model": "^7.23.0", "@microsoft/tsdoc": "0.14.1", "@microsoft/tsdoc-config": "0.16.1", "@vscode/codicons": "^0.0.32", - "framer-motion": "^7.1.0", "next": "^12.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -60,9 +66,6 @@ "sharp": "^0.30.7" }, "devDependencies": { - "@testing-library/cypress": "^8.0.3", - "@testing-library/dom": "^8.17.1", - "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.4.3", "@types/node": "^16.11.48", @@ -85,7 +88,6 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "happy-dom": "^6.0.4", - "msw": "^0.44.2", "prettier": "^2.7.1", "typescript": "^4.7.4", "unocss": "^0.45.6", diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx index cb78ac9a3786..12008b1fe288 100644 --- a/packages/website/src/components/CodeListing.tsx +++ b/packages/website/src/components/CodeListing.tsx @@ -1,3 +1,4 @@ +import { Group, Stack, Title } from '@mantine/core'; import type { ReactNode } from 'react'; import { CommentSection } from './Comment'; import { HyperlinkedText } from './HyperlinkedText'; @@ -9,36 +10,33 @@ export enum CodeListingSeparatorType { Value = '=', } -export interface CodeListingProps { - name: string; - summary?: ReturnType['summary']; - typeTokens: TokenDocumentation[]; - separator?: CodeListingSeparatorType; - children?: ReactNode; - className?: string | undefined; -} - export function CodeListing({ name, - className, separator = CodeListingSeparatorType.Type, summary, typeTokens, children, -}: CodeListingProps) { +}: { + name: string; + summary?: ReturnType['summary']; + typeTokens: TokenDocumentation[]; + separator?: CodeListingSeparatorType; + children?: ReactNode; + className?: string | undefined; +}) { return ( -
-
-
-

{`${name}`}

-

{separator}

-

- -

-
- {summary && } - {children} -
-
+ + + + {name} + + {separator} + + <HyperlinkedText tokens={typeTokens} /> + + + {summary && } + {children} + ); } diff --git a/packages/website/src/components/Comment.tsx b/packages/website/src/components/Comment.tsx index 61ab82488e7b..5c110acfbe9d 100644 --- a/packages/website/src/components/Comment.tsx +++ b/packages/website/src/components/Comment.tsx @@ -1,27 +1,28 @@ +import { Anchor, Box, Text } from '@mantine/core'; import Link from 'next/link'; import type { ReactNode } from 'react'; import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import type { CommentNode } from '~/DocModel/comment/CommentNode'; import type { CommentNodeContainer } from '~/DocModel/comment/CommentNodeContainer'; import type { FencedCodeCommentNode } from '~/DocModel/comment/FencedCodeCommentNode'; import type { LinkTagCommentNode } from '~/DocModel/comment/LinkTagCommentNode'; import type { PlainTextCommentNode } from '~/DocModel/comment/PlainTextCommentNode'; -export interface RemarksBlockProps { - node: ReturnType; - textClassName?: string | undefined; -} - -export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX.Element { +export function CommentSection({ node }: { node: ReturnType }): JSX.Element { const createNode = (node: ReturnType, idx?: number): ReactNode => { switch (node.kind) { case 'PlainText': - return {(node as ReturnType).text}; + return ( + + {(node as ReturnType).text} + + ); case 'Paragraph': return ( -

+ {(node as ReturnType).nodes.map((node, idx) => createNode(node, idx))} -

+ ); case 'SoftBreak': return
; @@ -29,18 +30,41 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX. const { codeDestination, urlDestination, text } = node as ReturnType; if (codeDestination) { - return {text ?? codeDestination.name}; + return ( + + + {text ?? codeDestination.name} + + + ); } if (urlDestination) { - return {text ?? urlDestination}; + return ( + + + {text ?? urlDestination} + + + ); } return null; } case 'FencedCodeBlock': { const { language, code } = node as ReturnType; - return {code}; + return ( + + {code} + + ); } default: break; @@ -50,12 +74,12 @@ export function CommentSection({ node, textClassName }: RemarksBlockProps): JSX. }; return ( -
+ {node.kind === 'Paragraph' || node.kind === 'Section' ? ( <>{(node as CommentNodeContainer).nodes.map((node, idx) => createNode(node, idx))} ) : ( - <>{createNode(node)} + createNode(node) )} -
+ ); } diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx index e0dd8ccdf128..87b19ef6ee11 100644 --- a/packages/website/src/components/DocContainer.tsx +++ b/packages/website/src/components/DocContainer.tsx @@ -1,3 +1,5 @@ +import { Group, Stack, Title, Text, Box } from '@mantine/core'; +import { useMediaQuery } from '@mantine/hooks'; import type { ReactNode } from 'react'; import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc'; import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; @@ -32,73 +34,73 @@ export function DocContainer({ extendsTokens, implementsTokens, }: DocContainerProps) { + const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); + return ( -
-
-

+ + + <Group> {generateIcon(kind)} {name} - </h2> - </div> + </Group> + -
-
} title="Summary" className="dark:text-white mb-5"> - {summary ? ( - - ) : ( -

No summary provided.

- )} -
-
- - {excerpt} - -
- {extendsTokens?.length ? ( -
-

Extends

-

{CodeListingSeparatorType.Type}

-

- -

-
- ) : null} - {implementsTokens?.length ? ( -
-

Implements

-

{CodeListingSeparatorType.Type}

-

- {implementsTokens.map((token, i) => ( - <> - - {i < implementsTokens.length - 1 ? ', ' : ''} - - ))} -

-
+
} padded dense={matches}> + {summary ? : No summary provided.} +
+ + + + {excerpt} + + + + {extendsTokens?.length ? ( + + + Extends + + + {CodeListingSeparatorType.Type} + + + + + + ) : null} + + {implementsTokens?.length ? ( + + + Implements + + + {CodeListingSeparatorType.Type} + + + {implementsTokens.map((token, idx) => ( + <> + + {idx < implementsTokens.length - 1 ? ', ' : ''} + + ))} + + + ) : null} + + + {typeParams?.length ? ( +
} padded dense={matches} defaultClosed> + +
) : null} -
- {typeParams?.length ? ( -
} - title="Type Parameters" - className="dark:text-white" - defaultClosed - > - -
- ) : null} -
{children}
-
-
-

+ {children} + + ); } diff --git a/packages/website/src/components/HyperlinkedText.tsx b/packages/website/src/components/HyperlinkedText.tsx index 3bb7f2e4d53d..28fdd135a50f 100644 --- a/packages/website/src/components/HyperlinkedText.tsx +++ b/packages/website/src/components/HyperlinkedText.tsx @@ -1,10 +1,7 @@ +import { Anchor, Text } from '@mantine/core'; import Link from 'next/link'; import type { TokenDocumentation } from '~/util/parse.server'; -export interface HyperlinkedTextProps { - tokens: TokenDocumentation[]; -} - /** * Constructs a hyperlinked html node based on token type references * @@ -12,22 +9,24 @@ export interface HyperlinkedTextProps { * * @returns An array of JSX elements and string comprising the hyperlinked text */ -export function HyperlinkedText({ tokens }: HyperlinkedTextProps) { +export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) { return ( <> - {tokens.map((token) => { + {tokens.map((token, idx) => { if (token.path) { return ( - - {token.text} + + + {token.text} + ); } return ( - + {token.text} - + ); })} diff --git a/packages/website/src/components/ItemSidebar.tsx b/packages/website/src/components/ItemSidebar.tsx deleted file mode 100644 index 5ece974c3ebc..000000000000 --- a/packages/website/src/components/ItemSidebar.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { FiMenu } from 'react-icons/fi'; -import { VscPackage } from 'react-icons/vsc'; -import { ListSidebar } from './ListSidebar'; -import type { DocItem } from '~/DocModel/DocItem'; -import type { getMembers } from '~/util/parse.server'; - -export interface ItemListProps { - packageName: string; - data: { - members: ReturnType; - }; - - selectedMember?: ReturnType | undefined; -} - -function onMenuClick() { - console.log('menu clicked'); - // Todo show/hide list -} - -export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) { - return ( -
-
-

- - {`${packageName}`} -

- -
-
- -
-
- ); -} diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx index bbdf13363cc4..d1c38bcadef0 100644 --- a/packages/website/src/components/MethodItem.tsx +++ b/packages/website/src/components/MethodItem.tsx @@ -1,4 +1,4 @@ -import { FiLink } from 'react-icons/fi'; +import { Group, Stack, Title } from '@mantine/core'; import { CommentSection } from './Comment'; import { HyperlinkedText } from './HyperlinkedText'; import { ParameterTable } from './ParameterTable'; @@ -7,10 +7,6 @@ import type { DocMethodSignature } from '~/DocModel/DocMethodSignature'; type MethodResolvable = ReturnType | ReturnType; -export interface MethodItemProps { - data: MethodResolvable; -} - function getShorthandName(data: MethodResolvable) { return `${data.name}(${data.parameters.reduce((prev, cur, index) => { if (index === 0) { @@ -21,37 +17,24 @@ function getShorthandName(data: MethodResolvable) { }, '')})`; } -function onAnchorClick() { - console.log('anchor clicked'); - // Todo implement jump-to links -} - -export function MethodItem({ data }: MethodItemProps) { +export function MethodItem({ data }: { data: MethodResolvable }) { return ( -
-
- -
-
-

{`${getShorthandName(data)}`}

-

:

-

+ + + + + {`${getShorthandName(data)}`} + : + <HyperlinkedText tokens={data.returnTypeTokens} /> - </h4> - </div> - </div> - </div> - <div className="mx-7 mb-5"> - {data.summary && <CommentSection textClassName="text-dark-100 dark:text-gray-300" node={data.summary} />} + + + + + + {data.summary ? : null} {data.parameters.length ? : null} -

-
+ + ); } diff --git a/packages/website/src/components/MethodList.tsx b/packages/website/src/components/MethodList.tsx index 7448d3277ea4..d53cf438966e 100644 --- a/packages/website/src/components/MethodList.tsx +++ b/packages/website/src/components/MethodList.tsx @@ -1,19 +1,18 @@ +import { Stack } from '@mantine/core'; import { MethodItem } from './MethodItem'; import type { DocMethod } from '~/DocModel/DocMethod'; import type { DocMethodSignature } from '~/DocModel/DocMethodSignature'; -export interface MethodListProps { +export function MethodList({ + data, +}: { data: (ReturnType | ReturnType)[]; -} - -export function MethodList({ data }: MethodListProps) { +}) { return ( -
-
- {data.map((method) => ( - - ))} -
-
+ + {data.map((method) => ( + + ))} + ); } diff --git a/packages/website/src/components/ParameterTable.tsx b/packages/website/src/components/ParameterTable.tsx index 09cb4e883eeb..f34bafba646a 100644 --- a/packages/website/src/components/ParameterTable.tsx +++ b/packages/website/src/components/ParameterTable.tsx @@ -2,12 +2,7 @@ import { HyperlinkedText } from './HyperlinkedText'; import { Table } from './Table'; import type { ParameterDocumentation } from '~/util/parse.server'; -interface ParameterDetailProps { - data: ParameterDocumentation[]; - className?: string | undefined; -} - -export function ParameterTable({ data, className }: ParameterDetailProps) { +export function ParameterTable({ data }: { data: ParameterDocumentation[] }) { const rows = data.map((param) => ({ Name: param.name, Type: , @@ -20,12 +15,5 @@ export function ParameterTable({ data, className }: ParameterDetailProps) { Type: 'font-mono', }; - return ( - - ); + return
; } diff --git a/packages/website/src/components/PropertyList.tsx b/packages/website/src/components/PropertyList.tsx index 97dec58ee967..7702f9d64414 100644 --- a/packages/website/src/components/PropertyList.tsx +++ b/packages/website/src/components/PropertyList.tsx @@ -1,16 +1,13 @@ +import { Stack } from '@mantine/core'; import { CodeListing } from './CodeListing'; import type { DocProperty } from '~/DocModel/DocProperty'; -export interface PropertyListProps { - data: ReturnType[]; -} - -export function PropertyList({ data }: PropertyListProps) { +export function PropertyList({ data }: { data: ReturnType[] }) { return ( -
+ {data.map((prop) => ( ))} -
+ ); } diff --git a/packages/website/src/components/RouterTransition.tsx b/packages/website/src/components/RouterTransition.tsx new file mode 100644 index 000000000000..bd86523377ab --- /dev/null +++ b/packages/website/src/components/RouterTransition.tsx @@ -0,0 +1,24 @@ +import { startNavigationProgress, resetNavigationProgress, NavigationProgress } from '@mantine/nprogress'; +import { useRouter } from 'next/router'; +import { useEffect } from 'react'; + +export function RouterTransition() { + const router = useRouter(); + + useEffect(() => { + const handleStart = (url: string) => url !== router.asPath && startNavigationProgress(); + const handleComplete = () => resetNavigationProgress(); + + router.events.on('routeChangeStart', handleStart); + router.events.on('routeChangeComplete', handleComplete); + router.events.on('routeChangeError', handleComplete); + + return () => { + router.events.off('routeChangeStart', handleStart); + router.events.off('routeChangeComplete', handleComplete); + router.events.off('routeChangeError', handleComplete); + }; + }, [router.asPath]); + + return ; +} diff --git a/packages/website/src/components/Section.tsx b/packages/website/src/components/Section.tsx index 259c22be51e3..4df3ff211bb5 100644 --- a/packages/website/src/components/Section.tsx +++ b/packages/website/src/components/Section.tsx @@ -1,72 +1,71 @@ -import { AnimatePresence, motion } from 'framer-motion'; +import { createStyles, UnstyledButton, Group, ThemeIcon, Collapse, Box, Text } from '@mantine/core'; import { type ReactNode, useState } from 'react'; -import { VscChevronDown, VscChevronRight } from 'react-icons/vsc'; -import { Separator } from './Seperator'; +import { VscChevronDown } from 'react-icons/vsc'; -export interface SectionProps { - children: ReactNode; - title: string; - className?: string | undefined; - defaultClosed?: boolean; - iconElement?: JSX.Element; - showSeparator?: boolean; - margin?: boolean; -} +const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({ + control: { + display: 'block', + width: '100%', + padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`, + color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black, + fontSize: theme.fontSizes.sm, + + '&:hover': { + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0], + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + }, + }, + + icon: { + transition: 'transform 150ms ease', + transform: opened ? 'rotate(180deg)' : 'rotate(0deg)', + }, +})); export function Section({ title, + icon, + padded = false, + dense = false, + defaultClosed = false, children, - className, - defaultClosed, - iconElement, - showSeparator = true, - margin = true, -}: SectionProps) { - const [collapsed, setCollapsed] = useState(defaultClosed ?? false); +}: { + title: string; + icon?: JSX.Element; + padded?: boolean; + dense?: boolean; + defaultClosed?: boolean; + children: ReactNode; +}) { + const [opened, setOpened] = useState(!defaultClosed); + const { classes } = useStyles({ opened }); return ( -
-

setCollapsed(!collapsed)} - > - {collapsed ? : } - {iconElement ?? null} - {title} -

- - {collapsed ? null : ( - <> - - {children} - - {showSeparator && } - + + setOpened((o) => !o)}> + + + {icon ? ( + + {icon} + + ) : null} + + {title} + + + + + + + {padded ? ( + + {children} + + ) : ( + children )} - -
+ + ); } diff --git a/packages/website/src/components/Sections.tsx b/packages/website/src/components/Sections.tsx index 0ce208fb1187..11a1619cd8ac 100644 --- a/packages/website/src/components/Sections.tsx +++ b/packages/website/src/components/Sections.tsx @@ -1,3 +1,4 @@ +import { useMediaQuery } from '@mantine/hooks'; import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc'; import { MethodList } from './MethodList'; import { ParameterTable } from './ParameterTable'; @@ -6,37 +7,31 @@ import { Section } from './Section'; import type { DocInterface } from '~/DocModel/DocInterface'; import type { ParameterDocumentation } from '~/util/parse.server'; -export interface PropertiesSectionProps { - data: ReturnType['properties']; -} +export function PropertiesSection({ data }: { data: ReturnType['properties'] }) { + const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); -export function PropertiesSection({ data }: PropertiesSectionProps) { return data.length ? ( -
} title="Properties" className="dark:text-white"> +
} padded dense={matches}>
) : null; } -export interface MethodsSectionProps { - data: ReturnType['methods']; -} +export function MethodsSection({ data }: { data: ReturnType['methods'] }) { + const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); -export function MethodsSection({ data }: MethodsSectionProps) { return data.length ? ( -
} title="Methods" className="dark:text-white"> +
} padded dense={matches}>
) : null; } -export interface ParametersSectionProps { - data: ParameterDocumentation[]; -} +export function ParametersSection({ data }: { data: ParameterDocumentation[] }) { + const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); -export function ParametersSection({ data }: ParametersSectionProps) { return data.length ? ( -
} title="Parameters" className="dark:text-white"> +
} padded dense={matches}>
) : null; diff --git a/packages/website/src/components/Seperator.tsx b/packages/website/src/components/Seperator.tsx deleted file mode 100644 index 02cc2802cb91..000000000000 --- a/packages/website/src/components/Seperator.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Separator() { - return
; -} diff --git a/packages/website/src/components/ListSidebar.tsx b/packages/website/src/components/SidebarItems.tsx similarity index 50% rename from packages/website/src/components/ListSidebar.tsx rename to packages/website/src/components/SidebarItems.tsx index 412f40c8e507..1a52f7586ad2 100644 --- a/packages/website/src/components/ListSidebar.tsx +++ b/packages/website/src/components/SidebarItems.tsx @@ -1,32 +1,16 @@ +import { createStyles, UnstyledButton, Group, Text } from '@mantine/core'; import Link from 'next/link'; +import type { Dispatch, SetStateAction } from 'react'; import { VscSymbolClass, VscSymbolEnum, - VscSymbolField, VscSymbolInterface, - VscSymbolMethod, + VscSymbolField, VscSymbolVariable, + VscSymbolMethod, } from 'react-icons/vsc'; -import type { ItemListProps } from './ItemSidebar'; import { Section } from './Section'; -import type { DocItem } from '~/DocModel/DocItem'; - -export type Members = ItemListProps['data']['members']; - -export interface ListSidebarSectionProps { - members: Members; - selectedMember?: ReturnType | undefined; - title: string; -} - -interface GroupedMembers { - Classes: Members; - Functions: Members; - Enums: Members; - Interfaces: Members; - Types: Members; - Variables: Members; -} +import type { GroupedMembers, Members } from './SidebarLayout'; function groupMembers(members: Members): GroupedMembers { const Classes: Members = []; @@ -81,42 +65,54 @@ function resolveIcon(item: keyof GroupedMembers) { } } -export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps) { +const useStyles = createStyles((theme) => ({ + link: { + fontWeight: 500, + display: 'block', + padding: 5, + paddingLeft: 31, + marginLeft: 25, + fontSize: theme.fontSizes.sm, + color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.colors.gray![7], + borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`, + + '&:hover': { + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0], + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + }, + }, +})); + +export function SidebarItems({ + members, + setOpened, +}: { + members: Members; + setOpened: Dispatch>; +}) { + const { classes } = useStyles(); const groupItems = groupMembers(members); return ( <> {(Object.keys(groupItems) as (keyof GroupedMembers)[]) .filter((group) => groupItems[group].length) - .map((group, i) => ( -
-
- {groupItems[group].map((member, i) => ( -
- - - {member.name} - - -
+ .map((group, idx) => ( +
+ {groupItems[group].map((member, i) => ( + + setOpened((o) => !o)}> + + {member.name} {member.overloadIndex && member.overloadIndex > 1 ? ( -
-

{`${member.overloadIndex}`}

-
+ + {member.overloadIndex} + ) : null} -
-
- ))} -
+ + + + ))}
))} diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx index 821e281fa390..d75e59a49276 100644 --- a/packages/website/src/components/SidebarLayout.tsx +++ b/packages/website/src/components/SidebarLayout.tsx @@ -1,30 +1,207 @@ -import type { PropsWithChildren } from 'react'; -import { type ItemListProps, ItemSidebar } from './ItemSidebar'; +import { + useMantineTheme, + AppShell, + Navbar, + MediaQuery, + // Aside, + Header, + Burger, + Anchor, + Breadcrumbs, + ScrollArea, + Group, + Text, + ThemeIcon, + Box, + UnstyledButton, + createStyles, + Menu, + ActionIcon, + useMantineColorScheme, +} from '@mantine/core'; +import { NextLink } from '@mantine/next'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { type PropsWithChildren, useState } from 'react'; +import { VscChevronDown, VscPackage } from 'react-icons/vsc'; +import { WiDaySunny, WiNightClear } from 'react-icons/wi'; +import { SidebarItems } from './SidebarItems'; +import type { DocItem } from '~/DocModel/DocItem'; import type { findMember } from '~/util/model.server'; +import type { getMembers } from '~/util/parse.server'; + +export interface SidebarLayoutProps { + packageName: string; + data: { + members: ReturnType; + member: ReturnType; + }; + + selectedMember?: ReturnType | undefined; +} + +export type Members = SidebarLayoutProps['data']['members']; + +export interface GroupedMembers { + Classes: Members; + Functions: Members; + Enums: Members; + Interfaces: Members; + Types: Members; + Variables: Members; +} + +const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({ + control: { + display: 'block', + width: '100%', + padding: theme.spacing.xs, + color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black, + + '&:hover': { + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![7] : theme.colors.gray![0], + color: theme.colorScheme === 'dark' ? theme.white : theme.black, + }, + }, + + icon: { + transition: 'transform 150ms ease', + transform: opened ? 'rotate(180deg)' : 'rotate(0deg)', + }, +})); + +const libraries = [ + { label: 'builders', value: 'builders' }, + { label: 'collection', value: 'collection' }, + { label: 'discord.js', value: 'discord.js' }, + { label: 'proxy', value: 'proxy' }, + { label: 'rest', value: 'rest' }, + { label: 'voice', value: 'voice' }, + { label: 'ws', value: 'ws' }, +]; + +export function SidebarLayout({ packageName, data, children }: PropsWithChildren>) { + const router = useRouter(); + + const theme = useMantineTheme(); + const { colorScheme, toggleColorScheme } = useMantineColorScheme(); + const dark = colorScheme === 'dark'; + + const [opened, setOpened] = useState(false); + const [openedPicker, setOpenedPicker] = useState(false); + + const { classes } = useStyles({ opened: openedPicker }); + + const libraryMenuItems = libraries.map((item) => ( + + {item.label} + + )); + + const asPathWithoutQuery = router.asPath.split('?')[0]; + const breadcrumbs = asPathWithoutQuery?.split('/').map((path, idx, original) => ( + + {path} + + )); -export function SidebarLayout({ - packageName, - data, - children, -}: PropsWithChildren } }>>) { return ( -
-
- Breadcrumbs -
-
-
+
-
{children}
-
- {packageName && data?.member ? ( - + <> + + <> + setOpenedPicker(true)} + onClose={() => setOpenedPicker(false)} + radius="md" + width="target" + > + + + + + + + + + {packageName} + + + + + + + {libraryMenuItems} + + + + + + + + ) : null} -
-
-
+ + } + // aside={ + // packageName && data?.member ? ( + // + // + // + // ) : ( + // <> + // ) + // } + // footer={ + //
+ // Application footer + //
+ // } + header={ +
+ +
+ + setOpened((o) => !o)} + size="sm" + color={theme.colors.gray![6]} + mr="xl" + /> + + + + {breadcrumbs} + +
+ toggleColorScheme()} + title="Toggle color scheme" + > + {dark ? : } + + +
+ } + > + {children} + ); } diff --git a/packages/website/src/components/Table.tsx b/packages/website/src/components/Table.tsx index ca30ce03ab09..ccbc6bfbce2d 100644 --- a/packages/website/src/components/Table.tsx +++ b/packages/website/src/components/Table.tsx @@ -1,45 +1,37 @@ +import { Table as MantineTable } from '@mantine/core'; import type { ReactNode } from 'react'; -export interface RowData { - monospace?: boolean; - content: string; -} - -export interface TableProps { +export function Table({ + rows, + columns, + columnStyles, +}: { columns: string[]; columnStyles?: Record; rows: Record[]; - className?: string | undefined; -} - -export function Table({ rows, columns, columnStyles, className }: TableProps) { +}) { return ( -
-
- - - {columns.map((column) => ( - + + + + {columns.map((column) => ( + + ))} + + + + {rows.map((row, idx) => ( + + {Object.entries(row).map(([colName, val]) => ( + ))} - - - {rows.map((row, i) => ( - - {Object.entries(row).map(([colName, val]) => ( - - ))} - - ))} - -
- {column} -
+ {column} +
+ {val} +
- {val} -
-
+ ))} + + ); } diff --git a/packages/website/src/components/TypeParamTable.tsx b/packages/website/src/components/TypeParamTable.tsx index 8b8dfb63c668..ecf15ada57db 100644 --- a/packages/website/src/components/TypeParamTable.tsx +++ b/packages/website/src/components/TypeParamTable.tsx @@ -2,12 +2,7 @@ import { HyperlinkedText } from './HyperlinkedText'; import { Table } from './Table'; import type { TypeParameterData } from '~/util/parse.server'; -export interface TableProps { - data: TypeParameterData[]; - className?: string; -} - -export function TypeParamTable({ data, className }: TableProps) { +export function TypeParamTable({ data }: { data: TypeParameterData[] }) { const rows = data.map((typeParam) => ({ Name: typeParam.name, Constraints: , @@ -24,7 +19,6 @@ export function TypeParamTable({ data, className }: TableProps) { return ( ; -} - -export function Class({ data }: ClassProps) { +export function Class({ data }: { data: ReturnType }) { return ( ; -} +export function Enum({ data }: { data: ReturnType }) { + const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false }); -export function Enum({ data }: EnumProps) { return ( -
} title="Members" className="dark:text-white"> -
+
} padded dense={matches}> + {data.members.map((member) => ( ))} -
+
); diff --git a/packages/website/src/components/model/Function.tsx b/packages/website/src/components/model/Function.tsx index f7cd41c3a4c5..84927210019e 100644 --- a/packages/website/src/components/model/Function.tsx +++ b/packages/website/src/components/model/Function.tsx @@ -2,11 +2,7 @@ import { DocContainer } from '../DocContainer'; import { ParametersSection } from '../Sections'; import type { DocFunction } from '~/DocModel/DocFunction'; -export interface FunctionProps { - data: ReturnType; -} - -export function Function({ data }: FunctionProps) { +export function Function({ data }: { data: ReturnType }) { return ( ; -} - -export function Interface({ data }: InterfaceProps) { +export function Interface({ data }: { data: ReturnType }) { return ( ; -} - -export function TypeAlias({ data }: TypeAliasProps) { +export function TypeAlias({ data }: { data: ReturnType }) { return ( ; -} - -export function Variable({ data }: VariableProps) { +export function Variable({ data }: { data: ReturnType }) { return ; } diff --git a/packages/website/src/contexts/member.tsx b/packages/website/src/contexts/member.tsx index ff4a97a46776..2c3d9ffa41ac 100644 --- a/packages/website/src/contexts/member.tsx +++ b/packages/website/src/contexts/member.tsx @@ -5,11 +5,10 @@ export type DocItemJSON = ReturnType; export const MemberContext = createContext(undefined); -export interface MemberProviderProps { +export const MemberProvider = ({ + member, + children, +}: { member: DocItemJSON | undefined; children: React.ReactNode; -} - -export const MemberProvider = ({ member, children }: MemberProviderProps) => ( - {children} -); +}) => {children}; diff --git a/packages/website/src/middleware.ts b/packages/website/src/middleware.ts index 10f5599636d8..bf7314d5cb7b 100644 --- a/packages/website/src/middleware.ts +++ b/packages/website/src/middleware.ts @@ -2,7 +2,7 @@ import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; export default function middleware(request: NextRequest) { - return NextResponse.rewrite(new URL('/docs/main/packages/builders', request.url)); + return NextResponse.redirect(new URL('/docs/main/packages/builders', request.url)); } export const config = { diff --git a/packages/website/src/pages/_app.tsx b/packages/website/src/pages/_app.tsx index ed6740a68686..fae614656667 100644 --- a/packages/website/src/pages/_app.tsx +++ b/packages/website/src/pages/_app.tsx @@ -1,8 +1,57 @@ +import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core'; +import { useColorScheme } from '@mantine/hooks'; import type { AppProps } from 'next/app'; -import '@unocss/reset/normalize.css'; +import Head from 'next/head'; +import { useEffect, useState } from 'react'; +import { RouterTransition } from '~/components/RouterTransition'; import '../styles/unocss.css'; import '../styles/main.css'; export default function MyApp({ Component, pageProps }: AppProps) { - return ; + const preferredColorScheme = useColorScheme('dark', { getInitialValueInEffect: true }); + const [colorScheme, setColorScheme] = useState(preferredColorScheme); + const toggleColorScheme = (value?: ColorScheme) => + setColorScheme(value ?? (colorScheme === 'dark' ? 'light' : 'dark')); + + useEffect(() => { + setColorScheme(preferredColorScheme); + }, [preferredColorScheme]); + + return ( + <> + + + + + + + + + + + + ); } diff --git a/packages/website/src/pages/_document.tsx b/packages/website/src/pages/_document.tsx index 73018b36c35d..14eb6c49f3a3 100644 --- a/packages/website/src/pages/_document.tsx +++ b/packages/website/src/pages/_document.tsx @@ -1,24 +1,19 @@ -import { Html, Head, Main, NextScript } from 'next/document'; +import { createGetInitialProps } from '@mantine/next'; +import Document, { Html, Head, Main, NextScript } from 'next/document'; -export default function Document() { - return ( - - - -