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

chore: storybook

Browse Source
This commit is contained in:
iCrawl
2023-04-13 19:09:56 +02:00
parent 8218ffc78d
commit e5859b41cf
91 changed files with 3660 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/src/components/Anchor.tsx
View File

@@ -2,7 +2,7 @@ import { FiLink } from '@react-icons/all-files/fi/FiLink';
export function Anchor({ href }: { href: string }) {
return (
<a className="focus:ring-width-2 focus:ring-blurple mr-1 inline-block rounded outline-0 focus:ring" href={href}>
<a className="mr-1 inline-block rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" href={href}>
<FiLink size={20} />
</a>
);

10
apps/website/src/components/CmdK.tsx
View File

@@ -50,7 +50,7 @@ export function CmdKDialog() {
() =>
searchResults?.map((item, idx) => (
<Command.Item
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-2 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
className="my-1 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 hover:bg-neutral-100 dark:text-white [&[aria-selected]]:ring [&[aria-selected]]:ring-width-2 [&[aria-selected]]:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
key={`${item.id}-${idx}`}
onSelect={() => {
router.push(item.path);
@@ -60,10 +60,10 @@ export function CmdKDialog() {
<div className="flex grow flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-items-center gap-4">
{resolveIcon(item.kind)}
<div className="w-50 sm:w-100 flex flex-col">
<div className="w-50 flex flex-col sm:w-100">
<h2 className="font-semibold">{item.name}</h2>
<div className="line-clamp-1 text-sm font-normal">{item.summary}</div>
<div className="line-clamp-1 hidden text-xs font-light opacity-75 dark:opacity-50 sm:block">
<div className="line-clamp-1 hidden text-xs font-light opacity-75 sm:block dark:opacity-50">
{item.path}
</div>
</div>
@@ -114,12 +114,12 @@ export function CmdKDialog() {
return (
<Dialog className="fixed left-1/2 top-1/4 z-50 -translate-x-1/2" state={dialog!}>
<Command
className="dark:bg-dark/50 min-w-xs sm:min-w-lg dark:border-dark-100 border-light-900 max-w-xs rounded border bg-white/50 shadow backdrop-blur-md sm:max-w-lg"
className="max-w-xs min-w-xs border border-light-900 rounded bg-white/50 shadow backdrop-blur-md sm:max-w-lg sm:min-w-lg dark:border-dark-100 dark:bg-dark/50"
label="Command Menu"
shouldFilter={false}
>
<Command.Input
className="dark:bg-dark/50 caret-blurple placeholder:text-dark-300/75 dark:border-dark-100 border-light-900 rounded-b-0 w-full rounded border-0 border-b bg-white/50 p-4 text-lg outline-0 dark:placeholder:text-white/75"
className="w-full border-0 border-b border-light-900 rounded rounded-b-0 bg-white/50 p-4 text-lg caret-blurple outline-0 dark:border-dark-100 dark:bg-dark/50 placeholder:text-dark-300/75 dark:placeholder:text-white/75"
onValueChange={setSearch}
placeholder="Quick search..."
value={search}

16
apps/website/src/components/Footer.tsx
View File

@@ -4,10 +4,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="md:pl-12 md:pr-12">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
@@ -25,7 +25,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
@@ -33,7 +33,7 @@ export default function Footer() {
Discord
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
@@ -46,7 +46,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
@@ -54,7 +54,7 @@ export default function Footer() {
discord.js
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discordjs.guide"
rel="noopener noreferrer"
target="_blank"
@@ -62,7 +62,7 @@ export default function Footer() {
discord.js guide
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"

14
apps/website/src/components/Header.tsx
View File

@@ -26,7 +26,7 @@ export default function Header() {
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={`${path}-${idx}`}
>
@@ -64,12 +64,12 @@ export default function Header() {
);
return (
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
<div className="h-full flex flex-row place-content-between place-items-center gap-8">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
@@ -77,13 +77,13 @@ export default function Header() {
<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
<Button
as="div"
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple w-56 grow rounded bg-white px-4 py-2.5 outline-0 focus:ring sm:grow-0"
className="w-56 grow rounded bg-white px-4 py-2.5 outline-0 sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4 md:justify-between">
<VscSearch size={18} />
<span className="opacity-65">Search...</span>
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<div className="hidden md:flex md:flex-row md:place-items-center md:gap-2 md:opacity-65">
<FiCommand size={18} /> K
</div>
</div>
@@ -92,7 +92,7 @@ export default function Header() {
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"

2
apps/website/src/components/InheritanceText.tsx
View File

@@ -7,7 +7,7 @@ export function InheritanceText({ parent }: { parent: ApiDeclaredItem }) {
<span className="font-semibold">
Inherited from{' '}
<ItemLink
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
itemURI={resolveItemURI(parent)}
>
{parent.displayName}

2
apps/website/src/components/Nav.tsx
View File

@@ -22,7 +22,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
autoHide
className="[&>div]:overscroll-none"
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

4
apps/website/src/components/Outline.tsx
View File

@@ -6,11 +6,11 @@ import { TableOfContentItems } from './TableOfContentItems';
export function Outline({ members }: { members: TableOfContentsSerialized[] }) {
return (
<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l bg-white pr-2 xl:block">
<aside className="fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l border-light-800 bg-white pr-2 xl:block dark:border-dark-100 dark:bg-dark-600">
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

6
apps/website/src/components/OverloadSwitcher.tsx
View File

@@ -19,7 +19,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
() =>
overloads.map((_, idx) => (
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
key={idx}
onClick={() => setOverloadIndex(idx + 1)}
>
@@ -32,7 +32,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
return (
<div className="flex flex-col place-items-start gap-2">
<MenuButton
className="bg-light-700 hover:bg-light-800 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-700 p-3 outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-800 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">
@@ -48,7 +48,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={menu}
>
{menuItems}

8
apps/website/src/components/PackageSelect.tsx
View File

@@ -16,7 +16,7 @@ export default function PackageSelect() {
() => [
<a href="https://old.discordjs.dev/#/docs/discord.js" key="discord.js">
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
id="discord-js"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
@@ -27,7 +27,7 @@ export default function PackageSelect() {
...PACKAGES.map((pkg, idx) => (
<Link href={`/docs/packages/${pkg}/main`} key={`${pkg}-${idx}`}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
id={pkg}
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
@@ -43,7 +43,7 @@ export default function PackageSelect() {
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -58,7 +58,7 @@ export default function PackageSelect() {
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={packageMenu}
>
{packageMenuItems}

2
apps/website/src/components/Panel.tsx
View File

@@ -4,7 +4,7 @@ export function Panel({ children }: PropsWithChildren) {
return (
<>
{children}
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</>
);
}

8
apps/website/src/components/Property.tsx
View File

@@ -24,22 +24,22 @@ export function Property({
const hasSummary = Boolean(item.tsdocComment?.summarySection);
return (
<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
<div className="flex flex-col scroll-mt-30 gap-4" id={item.displayName}>
<div className="flex flex-col gap-2 md:-ml-9">
{isDeprecated || item.isReadonly || item.isOptional ? (
<div className="flex flex-row gap-1 md:ml-7">
{isDeprecated ? (
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{item.isReadonly ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{item.isOptional ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}

2
apps/website/src/components/PropertyList.tsx
View File

@@ -28,7 +28,7 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
item={prop.item as ApiPropertyItem}
separator={PropertySeparatorType.Type}
/>
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</Fragment>
);
}),

2
apps/website/src/components/SyntaxHighlighter.tsx
View File

@@ -7,7 +7,7 @@ export function SyntaxHighlighter(props: typeof Code) {
{/* @ts-expect-error async component */}
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="github-dark-dimmed" />
</div>
<div className="[&_pre]:rounded-md [&_pre]:border [&_pre]:border-gray-300" data-theme="light">
<div className="[&_pre]:border [&_pre]:border-gray-300 [&_pre]:rounded-md" data-theme="light">
{/* @ts-expect-error async component */}
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="min-light" />
</div>

2
apps/website/src/components/Table.tsx
View File

@@ -13,7 +13,7 @@ export function Table({
() =>
columns.map((column, idx) => (
<th
className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
className="break-normal border-b border-light-900 px-3 py-2 text-left text-sm dark:border-dark-100"
key={`${column}-${idx}`}
>
{column}

6
apps/website/src/components/TableOfContentItems.tsx
View File

@@ -25,7 +25,7 @@ export interface TableOfContentsItemProps {
export function TableOfContentsPropertyItem({ property }: { property: TableOfContentsSerializedProperty }) {
return (
<a
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
className="ml-[10px] border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
href={`#${property.name}`}
key={`${property.name}-${property.kind}`}
title={property.name}
@@ -44,7 +44,7 @@ export function TableOfContentsMethodItem({ method }: { method: TableOfContentsS
return (
<a
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
className="ml-[10px] flex flex-row place-items-center gap-2 border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
href={`#${key}`}
key={key}
title={method.name}
@@ -91,7 +91,7 @@ export function TableOfContentItems({ serializedMembers }: TableOfContentsItemPr
<VscListSelection size={25} />
<span className="font-semibold">Contents</span>
</div>
<div className="mt-5.5 ml-2 flex flex-col gap-2">
<div className="ml-2 mt-5.5 flex flex-col gap-2">
{propertyItems.length ? (
<div className="flex flex-col">
<div className="flex flex-row place-items-center gap-4">

2
apps/website/src/components/ThemeSwitcher.tsx
View File

@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
return (
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />

6
apps/website/src/components/VersionSelect.tsx
View File

@@ -23,7 +23,7 @@ export default function VersionSelect() {
?.map((item, idx) => (
<Link href={`/docs/packages/${packageName}/${item}`} key={`${item}-${idx}`}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
@@ -38,7 +38,7 @@ export default function VersionSelect() {
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -53,7 +53,7 @@ export default function VersionSelect() {
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={versionMenu}
>
{versionMenuItems}

2
apps/website/src/components/documentation/HierarchyText.tsx
View File

@@ -41,7 +41,7 @@ export function HierarchyText({ item, type }: { item: ApiClass | ApiInterface; t
return (
<div className="flex flex-row place-items-center gap-4">
<h3 className="text-xl font-bold">{type}</h3>
<span className="space-y-2 break-all font-mono">
<span className="break-all font-mono space-y-2">
{excerpts.map((excerpt, idx) => (
<ExcerptText excerpt={excerpt} key={idx} model={model} />
))}

2
apps/website/src/components/documentation/section/DocumentationSection.tsx
View File

@@ -8,7 +8,7 @@ export function DocumentationSection(opts: PropsWithChildren<SectionOptions & {
return (
<Section {...props}>
{children}
{separator ? <div className="border-light-900 dark:border-dark-100 mt-6 border-t-2" /> : null}
{separator ? <div className="mt-6 border-t-2 border-light-900 dark:border-dark-100" /> : null}
</Section>
);
}

2
apps/website/src/components/documentation/section/MethodsSection.tsx
View File

@@ -31,7 +31,7 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
}`}
>
<Method inheritedFrom={inherited as ApiDeclaredItem & ApiItemContainerMixin} method={method} />
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</Fragment>
)),
[members],

4
apps/website/src/components/documentation/tsdoc/TSDoc.tsx
View File

@@ -39,7 +39,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
return (
<ItemLink
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
itemURI={resolveItemURI(foundItem)}
key={idx}
>
@@ -51,7 +51,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
if (urlDestination) {
return (
<Link
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href={urlDestination}
key={idx}
>

4
apps/website/src/components/model/enum/EnumMember.tsx
View File

@@ -6,8 +6,8 @@ import { TSDoc } from '../../documentation/tsdoc/TSDoc';
export function EnumMember({ member }: { member: ApiEnumMember }) {
return (
<div className="scroll-mt-30 flex flex-col" id={member.displayName}>
<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
<div className="flex flex-col scroll-mt-30" id={member.displayName}>
<div className="flex flex-col gap-2 md:flex-row md:place-items-center md:-ml-8.5">
<Anchor href={`#${member.displayName}`} />
<NameText name={member.name} />
{member.initializerExcerpt ? (

8
apps/website/src/components/model/method/MethodHeader.tsx
View File

@@ -25,24 +25,24 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
);
return (
<div className="scroll-mt-30 flex flex-col" id={key}>
<div className="flex flex-col scroll-mt-30" id={key}>
<div className="flex flex-col gap-2 md:-ml-9">
{isDeprecated ||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected) ||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic) ? (
<div className="flex flex-row gap-1 md:ml-7">
{isDeprecated ? (
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Protected
</div>
) : null}
{method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Static
</div>
) : null}