Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-15 02:53:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: website components (#8600)

Browse Source
This commit is contained in:
Noel
2022-09-06 19:48:33 +02:00
committed by GitHub
parent f3ce4a75d0
commit c3341570d9
55 changed files with 1910 additions and 2673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
packages/website/src/components/MethodItem.tsx
View File

@@ -1,86 +1,77 @@
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
import { ActionIcon, Badge, Box, createStyles, Group, MediaQuery, Stack, Title } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { useCallback, useMemo } from 'react';
import { FiLink } from 'react-icons/fi';
import { HyperlinkedText } from './HyperlinkedText';
import { InheritanceText } from './InheritanceText';
import { ParameterTable } from './ParameterTable';
import { TSDoc } from './tsdoc/TSDoc';
const useStyles = createStyles((theme) => ({
outer: {
display: 'flex',
alignItems: 'center',
gap: 16,
[theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
alignItems: 'unset',
},
},
}));
function getShorthandName(data: ApiMethodJSON | ApiMethodSignatureJSON) {
return `${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
if (index === 0) {
return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
}
return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
}, '')})`;
}
export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
const { classes } = useStyles();
const matches = useMediaQuery('(max-width: 768px)');
const method = data as ApiMethodJSON;
const key = `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`;
const key = useMemo(
() => `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`,
[data.name, data.overloadIndex],
);
const getShorthandName = useCallback(
(data: ApiMethodJSON | ApiMethodSignatureJSON) =>
`${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
if (index === 0) {
return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
}
return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
}, '')})`,
[],
);
return (
<Stack id={key} className="scroll-mt-30" spacing="xs">
<Group>
<Stack>
<Box className={classes.outer} ml={matches ? 0 : -45}>
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
<ActionIcon component="a" href={`#${key}`} variant="transparent" color="dark">
<FiLink size={20} />
</ActionIcon>
</MediaQuery>
{data.deprecated ||
(data.kind === 'Method' && method.protected) ||
(data.kind === 'Method' && method.static) ? (
<Group spacing={10} noWrap>
{data.deprecated ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
) : null}
{data.kind === 'Method' && method.protected ? <Badge variant="filled">Protected</Badge> : null}
{data.kind === 'Method' && method.static ? <Badge variant="filled">Static</Badge> : null}
</Group>
) : null}
<Group spacing={10}>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">{`${getShorthandName(
data,
)}`}</Title>
<Title order={4}>:</Title>
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
<HyperlinkedText tokens={data.returnTypeTokens} />
</Title>
</Group>
</Box>
</Stack>
</Group>
<Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg">
<Stack>
<div id={key} className="scroll-mt-30 flex flex-col gap-4">
<div className="flex flex-col">
<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
<a className="hidden md:inline-block" href={`#${key}`}>
<FiLink size={20} />
</a>
{data.deprecated ||
(data.kind === 'Method' && method.protected) ||
(data.kind === 'Method' && method.static) ? (
<div className="flex flex-row flex-wrap gap-1">
{data.deprecated ? (
<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{data.kind === 'Method' && method.protected ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Protected
</div>
) : null}
{data.kind === 'Method' && method.static ? (
<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Static
</div>
) : null}
</div>
) : null}
<div className="flex flex-row flex-wrap gap-1">
<h4 className="break-all font-mono text-lg font-bold">{`${getShorthandName(data)}`}</h4>
<h4 className="font-mono text-lg font-bold">:</h4>
<h4 className="break-all font-mono text-lg font-bold">
<HyperlinkedText tokens={data.returnTypeTokens} />
</h4>
</div>
</div>
</div>
{data.summary || data.parameters.length ? (
<div className="mb-4 flex flex-col gap-4">
{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
{data.summary ? <TSDoc node={data.summary} /> : null}
{data.remarks ? <TSDoc node={data.remarks} /> : null}
{data.comment ? <TSDoc node={data.comment} /> : null}
{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
{data.inheritanceData ? <InheritanceText data={data.inheritanceData} /> : null}
</Stack>
</Group>
</Stack>
</div>
) : null}
</div>
);
}